Less Learning Finishing Summary

Less Learning Finishing Summary

Understand how it works before you learn less. Less can be run in Nodejs browser and other platforms, there are many third-party tools can compile less, recommend the use of simpless, this direct less file programming as a CSS file, quick and easy. Less is a CSS preprocessing language, it expands the CSS language, add variables, mixed (MIxin), functions and other functions, so that the CSS from a line of lines to the description of the compiler, so that its maintenance cost is lower and more convenient. Less learning costs are also low, as long as you are familiar with the CSS language and have a programming foundation, you can easily get started.

The file is written with a. less extension.

1. Import less to import. Less files, examples are as follows:

@import "Lessname";

2. Variables are declared by means of the @ variable name.

2.1 General Value variables

@link-color:red; DECLARE here

. class{color: @link-color;//Use here

}

2.2 Selector Variable

@mySelector: Banner;

[Email protected] {Myselector} {/* some CSS */}

Equals

. banner{/* Some CSS */}

2.3 URL Variable

@images: ". /image ";

. class{Background-image:url ("@{images}/aa.jpg"); }

2.4 Attribute variables

@property: color;

. class{[Email protected]{property}:red; }

2.5 Variable Name

@name1: "Somesome";

@name2; " Name1 ";

content:@ @name2; ==content: "Somesome";

3 Mixed Mixin

What is a blend, or a property declared with a selector, can be invoked by invoking the selector in the same way;

. class1{color:red; }

. class2{. class1;//can also be used. Class1 (); }

Class2 CSS is equal to

. class2{color:red; }

3.1 If you do not want the mixin to be output, add a bracket behind it;

. class1{color:red; }

. Class2 () {//Note the brackets behind

Background-color:white;

}

. class3{. Class1;  . Class2; }

The actual output is:

. class1{color:red; }

. class3{

color:red; Background-color:white;

}//Note no class2.

3.2 Mixin can also include selectors

. class1{&:hover{content: "Hello"; }   }

. class2{. Class1; }

The actual output is:

. class2:hover{content: "Hello"; }

3.3 Mixin with parameters (use a semicolon interval between multiple parameters to set a default value)

. Border-radius (@radius) {

-webkit-border-radius: @radius;

-moz-border-radius: @radius;

Border-radius: @radius;

}

. class1{. Border-radius (6PX); }

The actual output is:

. class1{

-webkit-border-radius:6px;

-moz-border-radius:6px;

border-radius:6px;

}

. Class1 (@color: #232323; @ff: 90px) {};

3.4 @arguments represents a collection of all parameters

. Box-shadow (@x:0;@y:0; @blur: 1px; @color: #000) {

-webkit-box-shadow: @arguments;

-moz-box-shadow: @arguments;

Box-shadow: @arguments; };

. class1{. Box-shadow (3px;4px;4px;red);

}

3.6 Mixin can also be used as a function

. Mixin () {@width: 100px;  @height: 100px; }

. class1{. Mixin ();  Width: @width;  Height: @height; }

3.7 Mixin as a loop.

4 functions

Built-in Functions section

4.1 Color () Converts the value of the color to the string color ("#aaa"), and the return value is #aaa this is a color value;

4.2 Convert () converts numeric units supported units with m,cm mm in PT pc s Ms rad deg grad turn functions with two parameters the first is a floating-point number with a unit the second is the unit to be converted. Convert (12cm, "mm") ==>120mm

And so on, there are many more powerful functions.

Less Learning Finishing Summary