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 for externally introduced styles 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.

Copy Code
Lighten (@color, 10%); Return a color which is 10% *lighter* than @color
Darken (@color, 10%); Return a color which is 10% *darker* than @color

Saturate (@color, 10%); Return a color 10% *more* saturated than @color
Desaturate (@color, 10%); Return a color 10% *less* saturated than @color

Fadein (@color, 10%); Return a color 10% *less* transparent than @color
Fadeout (@color, 10%); Return a color 10% *more* transparent than @color
Fade (@color, 50%); Return @color with 50% transparency

Spin (@color, 10); Return a color with a ten degree larger in hue than @color
Spin (@color,-10); Return a color with a degree smaller hue than @color

Mix (@color1, @color2); Return a mix of @color1 and @color2

Copy Code

It's fairly simple to use:

Copy Code
@base: #f04615;

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

Copy Code

You can also extract color information:

Hue (@color); Returns the ' Hue ' channel of @color
Saturation (@color); Returns the ' saturation ' channel of @color
Lightness (@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 2
Ceil (2.4); Returns 3
Floor (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 might want to organize your CSS or simply wrap it up for better encapsulation, and you can use it as follows to define some set of properties in the #form like this:

Copy Code
#form {
. Submit () {
Display:block;
BORDER:1PX solid black;
Background:gray;
&:hover {Background:green}
}
. Register {...}
. Login {...}
}

Copy Code

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.

Copy Code
@var: Red;

#page {
@var: White;
#header {
Color: @var; White
}
}

#footer {
Color: @var; Red
}

Copy Code

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.

In the end there are some other features are not introduced, we can go to the official online look.

The dynamic css--less