Less précis-writers

Less are more, than CSS. Less somewhat similar to JQ, is a library of CSS.

Less is a dynamic style language, which belongs to CSS preprocessing language, and uses CSS-like syntax to give CSS dynamic language features, such as variables, inheritance, operations, functions, etc., to facilitate the writing and maintenance of CSS.

One, variable

By defining a variable (such as PHP's $?) by @, you can call the variable directly when you set the property value.

@width: 300px;

Two, mixed

Blending can easily introduce a well-defined class A into another class B, thus simply implementing Class B inherits all the attributes in Class A. We can also call them with parameters, just as with a function. (

You can also call the corresponding CSS property without parameters.)

Example:

To resolve compatibility issues by defining this class

. Rounded-corners (@radius: 5px) {

-webkit-border-radius: @radius;

-moz-border-radius: @radius;

-ms-border-radius: @radius;

-o-border-radius: @radius;

Border-radius: @radius;

}

#header {

. rounded-corners; No parameter call, default value 5px

}

#footer {

. Rounded-corners (10px); Parameters are called, @radius is 10px

}

Three, nested

We can nest another selector in one selector to implement inheritance, which greatly reduces the amount of code and the code looks clearer.

Example:

#header {

H1, p sibling A is nested by P

H1 {

font-size:26px;

Font-weight:bold;

}

p {

font-size:12px;

A

Text-decoration:none;

&:hover {//& symbol refers to the previous layer label here is a

border-width:1px

}

}

}

}

Four, common sense point

1.!important keyword: When called, add the!important keyword after the blend to indicate that all attributes brought by the blend are marked as!important.

2, you can use the CSS in the comments/* */, you can also use//, use//At compile time will be automatically filtered.

3. The. Less file can be introduced in the main file via the following situation:

@import "Lib.less";

Five, matching mode

The function is somewhat similar to

. Triangle (Top, @a:xx, @b:xx) {

property settings

}

. Triangle (Bottom, @a:xx, @b:xx) {

property settings

}

. Triangle (@_, @a:xx, @b:xx) {

property settings (common for each match)

}

Use

. abc{

. triangle (top); Select the first match with the top parameter (containing @_ content)

. triangle (bottom); Select a match with the first parameter of bottom (containing @_ content)

}

Vi. Functions and operations

Operations provide addition, subtraction, multiplication, and manipulation; we can do the property values and color operations, so that the complex relationship between property values can be realized. function one by one in less maps JavaScript code and can manipulate property values if you want.

Less

@the-border:1px; /* CSS generated by */

@base-color: #111; #header {

@red: #842210; Color: #333;

#header {border-left:1px;

Color: @base-color * 3; border-right:2px;

Border-left: @the-border; }

Border-right: @the-border * 2; #footer {

} color: #114411;

#footer {border-color: #7d2717;

Color: @base-color + #003300; }

Border-color:desaturate (@red, 10%);

}

VII. Avoid compiling

Sometimes output some non-conforming CSS statements, or less can not compile the statement. At this point, precede the statement with the ~ symbol and enclose the statement in quotation marks.

Example:

. class{

Filter: ~ "Ms:alwaysHasItsOwnSyntax.For.Stuff ()";

}

After compiling:

. class{

Filter:ms:alwaysHasItsOwnSyntax.For.Stuff ();

}

JavaScript expressions can also be used in. less files. Can be used in the form of anti-quotation marks:

Example:

@var: ' Hello '. toUpperCase () + '! ' `;

Output: @var: "hello!";

The current study of these, after the use of problems in the process to add.

Less précis-writers