Less study notes

1 What is less

Less contains a set of custom grammars and a parser that defines their own style rules based on these syntaxes, which eventually generate the corresponding CSS file through the parser. Less does not cut the original CSS features, not to replace the CSS, but on the basis of the existing CSS syntax, for the CSS to add the programming language features, the lower compiler tool Koala.exe

2 less syntax

There are a lot of grammatical rules in less, but the more commonly used ones are the most important ones:

variables, mixed rules (mixin), pattern matching, nested,& refer to the upper layer selector

Infrequently used: arguments avoid compiling! Important

1. Take a look at the simple use of variables , less has variable operations, (participate in the operation of any one parameter with units can be)

// Less Focus // variables // mixin Mixing // Pattern Matching // Nesting Rules @test-width:100px; @test-size:12px;. wrap{    color:red;    Width: (@test-width*3);    Font-size: @test-size*12;    Height: @test-width+12;}

Compile the output, it's CSS.

. Wrap {  color:red;  width:300px;  Font-size:144px;  height:112px;}

2. The mixed rule (mixin), which is equivalent to defining a class, is included directly in the other classes, so look at the specifics.

@test-width:100px; @test-size:12px;. wrap{    color:red;    Width: (@test-width*3);    Font-size: @test-size*12;    Height: @test-width+12;     /* here is the style of the default-border that mixin came in. */     . default-border;}. default-border{    border:solid 1px red;    Box-shadow:0px 0px;}

The corresponding CSS compilation result is ==>

The. default-Borde will appear in CSS if it is defined as

. default-Border (@varName) {...} This does not appear in the output CSS, the definition of the output will only appear in the Mixin, see the following code-2

. Wrap {  color:red;  width:300px;  Font-size:144px;  height:112px;   /* here is the style of the default-border that mixin came in. */   border:solid 1px red;   -webkit-box-shadow:0px 0px;  Box-shadow:0px 0px;}. default-border {  border:solid 1px red;   -webkit-box-shadow:0px 0px;  Box-shadow:0px 0px;}

Code 2-

1 . Border01 (@b1) {2Border:solid @b1 *10Red;3 }4 5. width-1(@w1:100px;) {6font-size: @w1;7Border-radius: @w1-14;8 }9 Ten . test{ One. Border01 (3); A. width-1(); -}

View Code

Output Code 2-

1 . Test {2   border:solid #ff0000; 3   font-size:100px; 4   border-radius:86px; 5 }

View Code

3. pattern Matching

Pre-defined a series of classes, which will have different parameters, the different parameters of its internal style is different, mixin when the parameters are different and automatically match to different classes

Example: Four arrows in a different direction

1 //Direction Bottom:2 . TG (bottom) {3Border-width: @test-width-70;4border-color:red transparent transparent transparent;5border-Style:solid dashed dashed dashed;6 }7 //Direction Right:8 . TG (right) {9Border-width: @test-width-70;Tenborder-color:transparent transparent transparent red; Oneborder-style:dashed dashed dashed solid; A } - //direction Left: - . TG (left) { theBorder-width: @test-width-70; -border-color:transparent red transparent transparent; -border-style:dashed solid dashed dashed; - } + //regardless of the match to which, this will certainly match, @_ must be this way, all parameters must be consistent - . TG (@_) { +width:0; Aheight:0; at Overflow:hidden; - } -  - . sj{ - . TG (bottom); -}

The corresponding output ==> all. TG does not appear in CSS, only. SJ appears in CSS

1 . SJ {
That's what you want under the arrow 2   border-width:30px; 3   border-color:red Transparent transparent  transparent; 4   border-style:solid dashed dashed dashed; 5   width:0; 6   height:0; 7   Overflow:hidden; 8 }

3. Nesting rules and &

1 . list{2margin:0;3padding:0;4list-Style:none;5 li{6 width:100px;7 height:50px;8     }9 a{Ten Float:left; One border:solid 1px red; A         //& represents his upper-level selector symbol -&: hover{ - background:red; the         } -     } -}

==> of output material

1 . List {2margin:0;3padding:0;4list-Style:none;5 }6 . List Li {7 width:100px;8 height:50px;9 }Ten . List A { One Float:left; A border:solid 1px red; - } - . list A:hover { the background:red; -}

4. Other unimportant

Arguments

. T-arguments (@style: solid, @width: 1px, @color: #ffddff) {    border: @arguments;}. Test-arguments{    t-arguments (dashed,5px);}

Output==>

. test-Arguments {  border:dashed 5px #ffddff;}

Avoid compiling

1 /* Koala will 210px-20px compile, this is not what we want, Calc is the property of CSS3, should be given to the browser to compile */ 2 . T-comile{3     width:calc (210px-20px); 4 }5/* Avoid compiling */6 . t-cancel-compile{ 7     Width: ~' calc (210px-20px) '; 8 }

Output==>

1 /* Koala will 210px-20px compile, this is not what we want, Calc is the property of CSS3, should be given to the browser to compile */ 2 . T-comile {3  width:calc (190px); 4 }5/* Avoid compiling */6 . t-cancel-Compile { 7   Width:calc (210px-20px); 8 }

!important, will put all the mixin come in all the attributes are suffix Plus! Important

. T-Important (@width: 200px, @height: 200px) {    width: @width;    Height: @height;}. Test-important{    . T-important ()!  important;}

Output==>

. test-Important {  !  important;  ! important;}

Less study notes