Introduction to less and compilation tools, and introduction to less compilation tools

Introduction to less and compilation tools, and introduction to less compilation tools
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:

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:

 

<link rel="stylesheet/less" href="example.less" />

Note:relThe attribute value isstylesheet/lessInsteadstylesheet.

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

<script src="lesscss-1.4.0.min.js"></script>

Note that, because the browser uses ajax to pull the. less file, it is directly opened in the local file system (that is, the address isfile://If there is a cross-origin, the. less file will not be pulled, and the style will not take effect.

In another case, the style may not take effect, that is, some servers (mostly in IIS) will return 404 for files with an unknown suffix, resulting in the failure to read the. less file. Solution: configure the MIME value for the. less file on the servertext/css(Search for specific methods ). You can also simply rename the. Less file to the. CSS file.

Reference: http://www.1024i.com/demo/less/

Http://www.cnblogs.com/mrhgw/p/4535429.html