Less Study Notes 27/8/17, less study notes

Less Study Notes 27/8/17, less study notes

Less official website

Http://less.bootcss.com/

 

Less is a dynamic style language. "Style. less" is directly changed to "style. less. For example:

<Link rel = "stylesheet/less" href = "less/style. less"/>

Less can now be run on clients (such as IE +, Webkit, Firefox) and servers (such as node. js. As mentioned above, Less is an extension of CSS. It is not only backward compatible, but also adds many additional functions based on the existing CSS syntax.

The basic LESS syntax is basically divided into the following aspects: variables, Mixins, nested rules, operations, functions, scopes, and so on.

1. Notes

You can use the/**/annotation of css to compile a css file. This annotation will be retained.

You can also use a double slash // to compile a css file. This comment will not be retained.

 

2. The variable must start with @. We recommend that you use the camper name. For example, @ variable name: Value/* ========== definition variable ===========*/@ color: # 4d926f; /* ========= apply to the element ===========*/# header {color: @ color ;} h2 {color: @ color;} Note: variables in Less are actually a "constant" because they can only be defined once. @ Arguments :. border_arg (@ w: 30px, @ c: red, @ x: solid) {border: @ arguments;} 3. mixin is actually a kind of nesting, it allows you to embed a class into another class, which is also called a variable. In other words, you can use a class to define CSS and use it as a variable. Embed it into another human being as its attribute; in addition, the mixture is like a function with parameters, as shown in the following example: /* ========== define a class =============== */. roundedCorners (@ radius: 5px) {-moz-border-radius: @ radius;-webkit-border-radius: @ radius ;} /* ============ apply the defined class to another class ===================*/# header {. roundedCorners (); // when calling, there is no mix of parameters, no parentheses are required} # footer {. roundedCorners (10px);} includes: parameter mixing, parameter mixing, and default parameter mixing. 4. The matching mode is equivalent to if (but not completely) in js. It must meet the conditions before matching.. Pos (a) {position: absolute ;}. pos (r) {position: relative ;}. pos (f) {position: fixed ;}. pos (@ _) {width: 200px :. myDiv {. pos (r) ;}_ is a fixed writing method, which means that no matter which of the above matches or does not match, the attribute must be added. 5. In less computing, any number, color, or variable can be involved in the calculation. The calculation should be enclosed in brackets. Common Operations include: + -*/

Example:
@ W: 300px ;. box {width :( @ w + 20) * 10; // In the calculation, only one unit is included in the color: # ccc-20; // not commonly used in actual development}
6. nested rule example :. list {width: 300px; li {height: 30px;} a {float: left; &: hover {color: red ;}}& indicates its upper-level selector. In actual development, try to use as few nesting as possible to reduce DOM queries, which can improve page loading performance. 7. Avoid compilation requirements: Sometimes you need to output incorrect css syntax or less unrecognized syntax. Method: you can add a Tilde + quotation marks before the string ~ ''Example: width :~ "Calc (100%-10 )";