Using less to preprocess a CSS

Less as a form of CSS extension, it does not castrate the functionality of the CSS, but in the existing CSS syntax, add a lot of extra features, so learning to not is a very easy thing.

Variable

Note that the variable in less is a full ' constant ', so you can define it only once.

{ color: @nice-blue;}  {  color: #5083ad;}

* * can even be defined as a variable with variable name: * *

//Less@fnord: "I am Fnord."; @var: ' Fnord '; #header:after {content: @ @var;}  {  content: "I am Fnord.";}

Mixed

In less we can define some common set of properties as one class and then call them in another class. So if we need to introduce those generic attribute sets in other classes now, we just need to call it in any class like this:

//Less.bordered{Border-top:dotted 1px black;Border-bottom:Solid 2px Black;}#menu a{Color:#111;. bordered;}//output. Bordered{Border-top:dotted 1px black;Border-bottom:Solid 2px Black;}#menu a{Color:#111;Border-top:dotted 1px black;Border-bottom:Solid 2px Black;}

Mixed with parameters

In less, you can also define a collection of attributes with parameters like a function:

{  Border-radius: @radius;   -moz-border-radius: @radius;   -webkit-border-radius: @radius;} #header {  . Border-radius (6px)}{  border-radius: 6px;   -moz-border-radius: 6px;   -webkit-border-radius: 6px;}

* * We can also set default values for parameters like this: * *

{  Border-radius: @radius;   -moz-border-radius: @radius;   -webkit-border-radius: @radius;} #header {  . Border-radius;}  {  border-radius: 5px;   -moz-border-radius: 5px;   -webkit-border-radius: 5px;}

* * You can also define a collection without parameter attributes, if you want to hide this collection of attributes, do not expose it to CSS, but you also want to refer to other attributes in the collection, you will find this method very useful: * *

 //less.wrap ()  { Text-wrap :  wrap ;  White-space :  pre-wrap ;  White-space : -moz-pre-wrap ;  Word-wrap :  Break-word ;} pre  { wrap } //output pre  { Text-wrap :  wrap ;  White-space :  pre-wrap ;  White-space : -moz-pre-wrap ;  Word-wrap :  Break-word ;} 

* * @arguments Variable * *

@arguments contains all the parameters passed in. If you don't want to deal with each parameter individually, you can write it like this:

{  box-shadow: @arguments;   -moz-box-shadow: @arguments;   -webkit-box-shadow: @arguments;} #head {  . Box-shadow (2px, 5px);}  {  box-shadow: 2px 5px 1px #000000;   -moz-box-shadow: 2px 5px 1px #000000;   -webkit-box-shadow: 2px 5px 1px #000000;}

Nesting rules

Less lets us write cascading styles in a nested way. Let's start by looking at the following CSS:
* * Note the use of & symbols-if you want to write a concatenation selector, * * Instead of writing descendant selectors, you can use &. This is especially useful for pseudo-classes such as: hover and: Focus.

//Less#header{Color:Black;. Navigation {font-size:12px; }. Logo{width:300px;&:Hover {Text-decoration:none}}}//Output #header{Color:Black;}#header. Navigation{font-size:12px;}#header. Logo{width:300px;}#header. Logo:hover{text-decoration:None;}

Operation

Any number, color, or variable can participate in the operation.

//less@base:5%; @filler: @base * 2; #head {  color: #888/4;   height: 100%/2 + @filler;}  {  color: #222222;   Height: 60%;}

Math function

Less provides a handy set of mathematical functions that you can use to manipulate values of some numeric types:

Lessround (1.67); Returns ' 2 ' Ceil (2.4);   Returns ' 3 ' floor (2.6);  Returns ' 2 ' percentage (0.5); Returns ' 50% '

Name space

Sometimes you may want to organize your CSS or simply package it for better packaging, and you can use it as follows to define some set of properties in #bundle, like so:

//Less "you just need to introduce a. button in #header A, like this:" #bundle{. button () {Display:Block;Border:1px solid Black;Background-color:Grey;&:Hover {background-color:white}}. tab (){//Do not call, do not output color:#fff; }} #header a{Color:Orange;#bundle >. button;}//Output #header a{Color:Orange;Display:Block;Border:1px solid Black;Background-color:Grey;}#header a:hover{Background-color:#ffffff;}

Scope

The scopes in less are very similar to other programming languages, starting with a local lookup of a variable or a hybrid module, and if not found, it goes to the parent scope until it is found.

//less @var: red; #page{@var: White;#header {color:@var;// White}} #footer{Color:@var;//Red}//Output #page #header{Color:#ffffff;}#footer{Color:#ff0000;}#page #header{Color:#ffffff;}#footer{Color:#ff0000;}

Comments

Comments in CSS form are still retained in less:

/*    Multiline Comment  Hello, i ' m a css-style comment   hello, i ' m a css-style comment*//single line comment

Importing

You can introduce the. less file in the main file, using the following situation:

@import "lib.less"; @import "Lib";//If you want to import a CSS file and don't want to handle it less, just use the. css suffix to: @import "Lib.css";

string interpolation

Variables can be embedded in strings like Ruby and PHP, and structures like @{name}

@base-url: "http://assets.fnord.com"; Background-image:url ("@{base-url}/images/bg.png");

Avoid compiling

Sometimes we need to output some incorrect CSS syntax or use some proprietary syntax that less does not know. To output such a value we can add a ~ to the string, for example:

{  filter: ~ "Ms:alwaysHasItsOwnSyntax.For.Stuff ()";}  {  filter: ms:alwaysHasItsOwnSyntax.For.Stuff ();}

JavaScript expressions

JavaScript expressions can also be used in. less files. Can be used in the form of anti-quotation marks:

@var: ' Hello '. toUpperCase () + '! ' ';//output @var: "hello!";

Reference: https://www.cnblogs.com/yldf55/p/5812438.html

Using less to preprocess a CSS