The use of CSS preprocessing language-less

Less is a CSS preprocessing language, it extends the CSS language, add variables, Mixin, functions and other features, make CSS easier to maintain and expand.

Less can run on Node or browser side.

compile processing for less

As a CSS preprocessing language, it is not as direct as the CSS can be used, but need to compile after use, how to compile it, the following node and browser side of the two cases explained.

Browser side:

Using less on the browser side requires only the following two steps:

1. Cited as less

Using the link tag to introduce less, it is important to note that rel="stylesheet/less"

<rel= "stylesheet/less"  type= "text/css"  href  = "Styles.less"/>

2. Introduce the JS file for less parsing

<src= "less.js"  type= "Text/javascript">< /script>

 

3. Declaration resolution, to be declared before the introduction of Less.js.

<Script> Less={env:"Development", Async:false, Fileasync:false, Poll: +, functions: {}, Dumplinenumbers:"Comments", Relativeurls:false, RootPath:":/a.com/"};</Script>

It's that simple, but because compilation parsing less consumes a certain amount of performance, and there is a delay in rendering, all of the recommended use of node or other third-party tools for compilation.

    It is important to note that the JS file must be introduced after the less file.

    less.js in < Span style= "COLOR: #0000ff" > here

< Span class= "Hljs-attribute" >< Span class= "Hljs-attribute" >  node end  

< Span class= "Hljs-attribute" >< Span class= "Hljs-attribute" >       1. Installing less  with NPM;

< Span class= "Hljs-attribute" >< Span class= "Hljs-attribute" >              $ npm install-g less

< Span class= "Hljs-attribute" >< Span class= "Hljs-attribute" >       2. Compile output

< Span class= "Hljs-attribute" >< Span class= "Hljs-attribute" >               Use the command line to invoke the less compiler to compile

< Span class= "Hljs-attribute" >< Span class= "Hljs-attribute" >              $ lessc styles.less

< Span class= "Hljs-attribute" >< Span class= "Hljs-attribute" >              This will output to stdout to write CSS. Save CSS results to selected files

< Span class= "Hljs-attribute" >< Span class= "Hljs-attribute" >              $ lessc styles.less styles.css

After the output you can use the compiled style.css.

How to use less 1. Notes

The comments for less are divided into two types:/* Comment content */and//comment content.

/*/For block comments you can annotate one or more lines,

As a line comment, only one line is commented, and the comment is compiled when it is compiled.

2. Variables

Less is a very convenient function is to define variables, when the CSS to use the same value, if not the variable, then change it needs to change 100, and the use of variables, only need to modify the value of the variable can be changed globally, is not very convenient.

and PHP Similar variables are at the beginning of the @, whether defined or used, use the following:

Define variable @cell_width: 100px;

You can use it when you use it.

. cell{
width:@cell_width;

}

3. Mixing

And CSS is not very different, the same use of the selector after the form of curly braces, the big brace is also written in the form of selectors + curly braces,

Unlimited nesting is possible without considering rendering optimizations, but given the heavy workload of browser rendering tasks, it is often a maximum of 4 layers.

. body{
width:100%;
   . section{
border:1px solid #000;
}

}

/*
The effect after parsing is the following
*/

. body{
width:100%;

}

. body. section{

border:1px solid #000;
}

In addition to the apply, you can also refer to:

. section{border:1px Solid #000; }

. body{width:100%;   . Section ;

. body{
width:100%;

border:1px solid #000;

In addition to the above, can also use the reference, hahaha

. Border_radius (@radius: 5px) {    -webkit-border-radius: @radius;    -moz-border-radius: @radius;    Border-radius: @radius;  }. cell{    width:100%;    Can not pass parameters, by default with 5px     . Border_radius (10px)}

Can be said to be very flexible, casually set casually cited.

By understanding the above, you can use less for project development in combat!

Finish

The use of CSS preprocessing language-less