Dynamic Style Language-less basics

CSS is a non-procedural language, lack of logic, inconvenient to maintain

Less on the basis of the existing CSS syntax, add programming language features to CSS

The functions of variables, mixing, arithmetic and function are introduced, which greatly simplifies the writing of CSS and reduces the maintenance cost of CSS.

Less contains a set of syntax and a parser that the user uses to generate the style rules that are generated by the parser after the CSS file

1. Variables

Scoped with {}, variables are looked up from inside out

@width: 20px;   {    : 30px;     #centerDiv {        : @width;  Here should take the value of the most recently defined variable               width 30px}        }  {: @width; // The value of the width of the variables defined above should be  taken here 20px}

{   width: 30px;  } {width: 20px;   }     

2. Mixing (multi-inheritance implementation)

To nest a class into another class using the

{ //default value is 5-moz-border-radius: @radius;   -webkit-border-radius: @radius;   Border-radius: @radius;  } {.  roundedcorners;  }    {.  roundedcorners (10px);  }   

{  -moz-border-radius:5px;   -webkit-border-radius:5px;   Border-radius:5px;  } {-moz-border-radius:10px;        -webkit-border-radius:10px;   Border-radius:10px;  }

Mixed parameters

//define a style selector. Borderradius (@radius) {  -moz-border-radius: @radius;   -webkit-border-radius: @radius;   Border-radius: @radius;  }   {  }  {  }

Arguments parameter: represents all variables:

. Boxshadow (@x:0,@y:0, @blur: 1px, @color: #000) {  -moz-box-shadow: @arguments;   -webkit-box-shadow: @arguments;   box-shadow: @arguments;  } {.  Boxshadow (2px,2px,3px, #f36);  }   

Support namespaces to prevent duplicate name problems:

{  . Home {...}   {...}   }

Nested rules:

<DivID= "Home">  <DivID= "Top">Top</Div>  <DivID= "Center">  <DivID= "Left">Left</Div>  <DivID= "Right">Right</Div>  </Div>  </Div>

#home {    color:blue;    width:600px;    height:500px;    Border:outset;    #top {         border:outset;         width:90%;    }    #center {         border:outset;         height:300px;         width:90%;         #left {           border:outset;           Float:left;   width:40%;         }         #right {           border:outset;           Float:left;   width:40%;}}}  

&:

a {  color:red;  Text-decoration:none;  &:hover {//have & parse is the same element or pseudo-class of this element, no & parsing is the descendant element  Color:black;   text-decoration:underline;  }  }

3. Operations and functions

Arithmetic numeric value (such as color, number)

A set of functions specifically for color

 lighten (@color, 10%); //  returns 10% colors brighter than the primary color  darken (@color, 10%); //  Returns the color of 10% darker than the primary colors  saturate (@color, 10%); //  Returns the color saturated 10% than the primary colors  desaturate (@color, 10%);    Returns the color of the unsaturated 10% than the primary colors  Fadein (@color, 10%); //  Returns the color  fadeout (@color, 10%) that is less than the opacity of the primary color 10%; //  Returns a color that is 10% transparent than the primary colors  spin (@color, 10); //  spin (@color,-10); // //Use  

Init: #f04615;  #body {   Background-color:fadein (@init, 10%);  }

4. Comments

As with JS

Note: Single-line comments do not appear in the compiled CSS file, and if you need to retain comments, use multiple lines of comments

5. How to use:

Client:

Note The order of the files
<link rel= "stylesheet/less" type= "Text/css" href= "styles.less" ><script type= "Text/javascript" Src= "Less.js" ></script>

The actual project development commonly used:

After writing the less file, compile it directly into a CSS file and then introduce the page

Dynamic Style Language-less basics