Less and compilation tools-see rainbow after the storm

Less and compilation tools-see rainbow what is LESSCSS

LESSCSS is a dynamic style language and is a CSS preprocessing language. It uses CSS-like syntaxes and gives CSS dynamic language features, such as variables, inheritance, operations, and functions, making CSS compilation and maintenance easier.

LESSCSS can be used in multiple languages and environments, including browsers, desktop clients, and servers.

Quick preview of language features:

Variable:

Variables allow us to define a series of general styles separately and then call them as needed. Therefore, when making global style adjustments, we may only need to modify several lines of code.

LESS source code:

@color: #4D926F;#header {    color: @color;}h2 {    color: @color;}

Compiled CSS:

#header {    color: #4D926F;}h2 {    color: #4D926F;}

Mixins)

You can easily introduce A defined class A to another class B, so that class B can inherit all the attributes of class. We can also call it with parameters, just like using a function.

LESS source code:

.rounded-corners (@radius: 5px) {    -webkit-border-radius: @radius;    -moz-border-radius: @radius;    -ms-border-radius: @radius;    -o-border-radius: @radius;    border-radius: @radius;}#header {    .rounded-corners;}#footer {    .rounded-corners(10px);}

Compiled CSS:

#header {    -webkit-border-radius: 5px;    -moz-border-radius: 5px;    -ms-border-radius: 5px;    -o-border-radius: 5px;    border-radius: 5px;}#footer {    -webkit-border-radius: 10px;    -moz-border-radius: 10px;    -ms-border-radius: 10px;    -o-border-radius: 10px;    border-radius: 10px;}

Nesting

We can nest another selector in one selector to implement inheritance, which greatly reduces the amount of code and the code looks clearer.

LESS source code:

#header {    h1 {        font-size: 26px;        font-weight: bold;    }    p {        font-size: 12px;        a {            text-decoration: none;            &:hover {                border-width: 1px            }        }    }}

Compiled CSS:

#header h1 {    font-size: 26px;    font-weight: bold;}#header p {    font-size: 12px;}#header p a {    text-decoration: none;}#header p a:hover {    border-width: 1px;}

Functions and operations

Operations provide addition, subtraction, multiplication, and Division operations. We can perform operations on attribute values and colors to implement complex relationships between attribute values. The functions in LESS map JavaScript code one by one. You can operate the attribute values if you want.

LESS source code:

the-border: 1px;@base-color: #111;@red:        #842210;#header {    color: (@base-color * 3);    border-left: @the-border;    border-right: (@the-border * 2);}#footer {    color: (@base-color + #003300);    border-color: desaturate(@red, 10%);}

Compiled CSS:

#header {    color: #333;    border-left: 1px;    border-right: 2px;}#footer {    color: #114411;    border-color: #7d2717;}

More instructions

For more detailed syntax features, see the Language documentation.

Quick Start

And then introduce the page.

GUI compilation tool

For convenience, it is recommended that you use the GUI compilation tool to compile the. less file. The following are some optional GUI compilation tools:

1. koala (Win/Mac/Linux)

LESSCSS/SASS compilation tool developed by Chinese people. : Http://koala-app.com/index-zh.html. if there is no effect, you can click here to download a hundred-degree cloud disk.

Seven reasons for choosing koala:

1. Multi-language support: supports Less, Sass, CoffeeScript, and Compass Framework.
2. Real-time Compilation: monitors files and automatically performs Compilation When the files change. All of these operations are performed in the background without manual operations.
3. Compilation options: You can set both the compilation options of a file and the compilation options of a file.
4. Powerful file right-click function: Right-click the file element to open the file, open the file directory, open the output file directory, set the output file directory, compile, delete six common functions.
5. Error prompt: If a syntax error occurs during compilation, koala will pop up an error message in the lower right corner to help developers locate the code error.
6. Cross-platform: windows, linux, and mac can run perfectly.
7. Free and responsible: koala is free of charge, and the author is responsible for it. The author will give a prompt reply to any questions, and the comments and opinions can be directly submitted to the author. This can be solved in the next version.

After learning about its advantages, let's get familiar with its interface, which is actually one of the reasons why I chose it.

Simple and beautiful panel

The preceding four numbers correspond to four areas:

Area 1: The first button is used to add a project, the second button is used to open the compilation file error prompt, and the third button is set to koala, which can set the default compilation and Output Modes for all files, files to be filtered, interface languages (Chinese/English), etc. Of course, this section also contains the current koala version number and author information.

Area 2: project area. You can drag the project to this area.

Area 3: List of files to be compiled. By default, files starting with the following line do not appear in the list. Green indicates the files for dynamic compilation, and gray indicates non-dynamic compilation. Click the corresponding file and the fourth block appears. Set the file compilation option. If your file is added later, click the refresh button above to refresh the file to be compiled, of course, you can also use the following all/less/sass/coffee to filter the files you want to compile.

Area 4: Set the file compilation option. You must select a file to be compiled in the third area. Take sass as an example. The first option indicates whether to enable dynamic compilation. The second option indicates whether to enable these four functions. For convenience of debugging, debug info is enabled, of course, if you use compass, You have to enable compass. The third group represents the output css format, which can be divided into four types: nested, compressed, compact, and expanded. The last compile button can be compiled manually.

Now that you are familiar with the interface, let's take the following steps:

Simple Procedure

Step 1: First click the gear button in the first region, set the default file compilation method, and set the interface language to Chinese.

Step 2: add the project file to be compiled. You can add the file by adding the plus sign in the first area, or drag the project to the second project area.

Step 3: click the file to be compiled, and the specific compilation method of the file is displayed in Area 4. If there is nothing special, use the default setting directly, if dynamic compilation is not required, the checkbox "real-time compilation" is directly removed, and the rest follow the operations described above.

Step 4: Right-click the file to be compiled, and several common operations are displayed: open the file, open the file directory, open the output file directory, set the output file directory, compile and delete. Generally, we need to set the directory of the output file.

Step 5: If your files include less, sass, and coffee, you 'd better select the file to be dynamically compiled by clicking the filter conditions below. Otherwise, all the files will be larger.

2. Codekit (Mac)

A tool that automatically compiles Less/Sass/Stylus/CoffeeScript/Jade/Haml, including additional functions such as syntax check, image optimization, and automatic refresh. Http://incident57.com/codekit/

3. WinLess (Win)

A less compilation software. Http://winless.org/. if it is ineffective, click here.

Steps for using winless:

A. Download the WinLess tool and click Install.

B. Create a folder, such as MyLessTest, and create sub-folders less and css

MyLessTest
-- Less
-- Css

C. open WinLess, for example, click Add folder to Add the created MyLessTest (Note: instead of adding the less folder, it is its upper-level directory MyLessTest, to output the result to the less directory css)

D. All the less files will appear on the right side of WinLess (if not, click "Refresh" to Refresh) and output path (output file ).

E. select the file to be compiled, such as "bootstrap. less (Note: Do not select all. Here, some other files are only bootstrap. click "Compile" to start compilation. Then, open the less directory css to view the results.

4. SimpleLess (Win/Mac/Linux)

A less compilation software. Http://wearekiss.com/simpless

Node. js Library

LESSCSS officially has a Node. js-based library for compiling. less files.

During use, install less globally (in some systems, you may need to add sudo in front to switch to super administrator permissions ):

npm install -g less

Then you can use lessc to compile the. less file:

lessc example/example.less example/example.css

For more options, run lessc to view the instructions.

Browser

LESSCSS can also be used directly on the browser without compilation.

Usage:

1. Download the. js file for LESSCSS, such as a lesscss-1.4.0.min.js.

2. Introduce the. less file to the page

Note:relThe attribute value isstylesheet/lessInsteadstylesheet.

3. Introduce the. js file downloaded in step 1.