The dynamic css--less

Less is a style language that gives CSS the properties of dynamic languages such as variables, inheritance, operations, and functions. Less can be run on the client (support Ie6+,webkit,firefox) or on the server with node. js or Rhino.

Less as a form of CSS extension, it does not castrate the functionality of the CSS, but in the existing CSS syntax, adding a lot of additional features, so for the front-end developers to learn, it is a very easy thing. Let's look at a section of CSS that is written in less:

@base: #f938ab;. Box-shadow (@style, @c) when (IsColor (@c)) {    Box-shadow:         @style @c;    -webkit-box-shadow: @style @c;    -moz-box-shadow:    @style @c;}. Box-shadow (@style, @alpha: 50%) When (Isnumber (@alpha)) {    . Box-shadow (@style, rgba (0, 0, 0, @alpha));}. box {     color:saturate (@base, 5);    Border-color:lighten (@base, 30%);    div {. Box-shadow (0 0 5px, 30%)}}

Without learning less, we don't know what the code is for, how to generate the CSS code we're familiar with, and the above code is compiled after less:

. box {    color: #fe33ac;    Border-color: #fdcdea;}. Box Div {    box-shadow:0 0 5px rgba (0, 0, 0, 0.3);    -webkit-box-shadow:0 0 5px rgba (0, 0, 0, 0.3);    -moz-box-shadow:0 0 5px rgba (0, 0, 0, 0.3);}

Now let's learn less.

We know that if we want to use jquery, we have to introduce the jquery library on the page, as well as the less library--less.js when we write CSS code. Click here to download the less library.

Once downloaded, you can simply introduce it in the page.

<link rel= "stylesheet/less" type= "Text/css" href= "style.less" media= "All"/><script type= "Text/javascript" Src= "Less.js" ></script>

Note that the method of the external introduction of the style has changed, the rel attribute value is stylesheet/less, and the suffix of the style becomes. Less and less style files must be introduced before less.js.

After the introduction of less, formally began to learn less.

Less syntax 1, variables

The less variable allows you to define a commonly used attribute value in a style, and then apply it to a style so that changing the value of the variable can change the overall effect. And the global variables in JavaScript are a bit similar.

You can even define a variable with a variable name.

@color: red; @foot: ' Color ';. head{    color: @color;}. foot{    color: @ @foot;}

Output:

. head {  color:red;}. foot {  color:red;}

Note that the variable in less is a full "constant", so it can only be defined once.

2. Mixing

Mixing is defining a class, and then invoking the class in another class.

. common{    color:red;}. nav{    background: #ccc;    . Common;}

Output:

. common {color:red;}.　　Nav {background: #ccc; color:red;}

The class, ID, or element attribute set in CSS can be introduced in the same way.

3. Mixing with parameters

In less, you can think of class as a function, whereas a function can take parameters.

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

Final output:

#header {    border-radius:4px;    -moz-border-radius:4px;    -webkit-border-radius:4px;}. button {    border-radius:6px;    -moz-border-radius:6px;    -webkit-border-radius:6px;}

We can also set default values for parameters:

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

Final output:

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

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

. 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;}

There is also an important variable @arguments for mixing.

@arguments contains all the arguments passed in, which is useful when you don't want to handle individual arguments.

. Border (@width: 0, @style: solid, @color: red) {    border: @arguments;}. demo{    . Border (2px);}

Output:

. demo {    border:2px solid #ff0000;}

There are many advanced applications, such as pattern matching, in addition to blending. Here is not introduced, only to talk about the basic things.

4. Nesting rules

Less allows us to write CSS in a nested way. Here's what we usually write about CSS:

#header H1 {    font-size:26px;    Font-weight:bold;} #header p {    font-size:12px;} #header p a {    text-decoration:none;} #header p a:hover {    border-width:1px;}

With less we can write this:

#header {    h1 {        font-size:26px;        Font-weight:bold;    }    p {        font-size:12px;        a {            text-decoration:none;            &:hover {border-width:1px}}}}    

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.


5. Arithmetic

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

. demo{    Color: #888/4;}

Output:

. demo {    color: #222222;}

Less can perform complex arithmetic, and the same composite operation is no problem.

6. Color function

Less provides a series of color arithmetic functions. The color is converted to the HSL color space first and then manipulated at the channel level.

Lighten (@color, 10%);     Return a color which is 10% *lighter* than @colordarken (@color, 10%);      Return a color which is 10% *darker* than @colorsaturate (@color, 10%);    Return a color 10% *more* saturated than @colordesaturate (@color, 10%);  Return a color 10% *less* saturated than @colorfadein (@color, 10%);      Return a color 10% *less* transparent than @colorfadeout (@color, 10%);     Return a color 10% *more* transparent than @colorfade (@color, 50%);        Return @color with 50% Transparencyspin (@color, ten);         Return a color with a degree larger in hue than @colorspin (@color, -10);        Return a color with a degree smaller hue than @colormix (@color1, @color2);    Return a mix of @color1 and @color2

It's fairly simple to use:

@base: #f04615;. class {    color:saturate (@base, 5);    Background-color:lighten (Spin (@base, 8), 25%);}

You can also extract color information:

Hue (@color);        Returns the ' Hue ' channel of @colorsaturation (@color); Returns the ' saturation ' channel of @colorlightness (@color);  Returns the ' lightness ' channel of @color

For example:

@color: #f36, #header {    BACKGROUND-COLOR:HSL (hue (@color), 45%,90%);}

Output:

#header {    background-color: #f1dae0;}

7. Math function

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

Round (1.67); Returns 2ceil (2.4);   Returns 3floor (2.6);  Returns 2

If you want to convert a value to a percentage, you can use the percentage function:

Percentage (0.5); Returns 50%

8. Namespaces

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

#form {    . Submit () {        display:block;        border:1px solid black;        Background:gray;        &:hover {background:green}    }    . Register {...}.    Login {...}}

You just have to introduce it in the #myform like this. Submit:

#myform {    color:orange;    #form > Submit;}

9. Scope

Similar to other programming languages, the less variable also has scope. First, the variable or mixed module is looked up locally, and if not found, it is searched in the parent scope until it is found.

@var: red; #page {    @var: white;    #header {        color: @var;//White    }} #footer {    color: @var;//Red  }

10. Comments

Comments in CSS form remain in less, while less also supports double slash annotations, but is automatically filtered out when compiled into CSS.