Learn how to conquer CSS with less

Today, we are very ambitious. We decided to deal with seajs, coffee, and less. When I got home, I spent one afternoon in front of my computer and one evening. The sad discovery only solved less. Er, sum up less first.

The goal of less is CSS. View CSS from a programming point of view, view CSS with OO ideas, introduce constants, functions, namespaces, and other concepts, so that very loose page styles form objects one by one, convenient development and maintenance. Of course, you should pay attention to the skills when writing, otherwise the generated CSS will have a lot of redundant code. Therefore, we only recommend advanced CSS use. It is best to familiarize yourself with CSS in the preliminary csser!

Variables and constants (variables)

Start with @. Only attribute values can be defined. Pay attention to the coverage of variables and scope issues. For example: @ Blue: # 5b83ad; // constant @ light_blue: @ nice-blue + #222; // calculated constant @ highlight: "blue"; # header {color: @ highlight;} // The constant name is a constant.

Function

Think of each class as a function that allows other functions to call and pass parameters. And can define subfunctions in the function.

1. border {border: 2px solid # CCC; border-radius: 4px;} 2. header {. border;} 3 4 // The parameter 5 must be passed during the call. border (@ width, @ color, @ radius) {border: @ width solid @ color; border-radius: @ radius;} 6. header {. border (2px, # CCC, 4px);} 7 8 // with default parameter 9. border (@ width: 2px, @ color: # CCC, @ radius: 4px) {10 border: @ width solid @ color; border-radius: @ radius; 11} 12. header {. border (4px, # f00, 2px);} 13 14 // @ arguments indicates all parameters 15 . Border (@ width: 1px, @ style: solid, @ color: # CCC) {border: @ arguments;} 16 17 # header {18 Height: 100px; 19 &: hover {color: red;} // ==# header: hover, & indicates the same level 20 &. top {margin-top: 12px;} // = # header. top21 H1 {font-size: 24px;} // ==#header h122} 23 # Content {24 H1 {# header H1 ;}// call # header H1. At this time, # header is equivalent to the namespace concept 25}

Comments)

Like JavaScript, a single line "//" and multiple lines "/**/" are supported. During compilation, "//" is deleted and "/**/" is retained.

Operation

The less computation capability is powerful, mainly in two aspects: one is the regular four arithmetic operations (operations), and the other is the color calculation. The four Arithmetic Operations follow the regular priority. They feature the ability to operate colors, numbers, and variables, and have a strong fault tolerance capability for values with units. Example: @ base: 5%; @ filler: @ base * 2; // variable operation color: #888/4; // color operation, result = #222 @ var 1px + 5; // result = 6 color calculation the following function is provided mainly for less:

Lighten (@ color, 10%); // return lighten color darken (@ color, 10%); // return darken color saturate (@ color, 10% ); // return more saturated desaturate (@ color, 10%); // return less saturated fadein (@ color, 10%); // return less transparent fadeout (@ color, 10% ); // return more transparent spin (@ color,-10 | 10); // return smaller or larger than @ color

Extracted color value: hue (@ color); // returns the hue channel of color saturation (@ color); // returns the saturation channel of @ color lightness (@ color ); // returns the lightness channel of @ color alpha (@ color) // return alpha channel of @ color (transparent channel in HSL mode) HSL (H, S, L ), HSLA (H, S, L, A), RGB (R, G, B), rgba (R, G, B, A) // not to mention, some browsers support this function.

Install

Like coffee, less provides two installation modes. One is the interpretation mode, that is, Js. Through JS, You can compile the less file into a normal CSS and embed it into the HTML page. The process here should be configured through Js. The other is the compilation mode. to install the less compiler, you need to support the node (which focuses on NPM) environment. Enter cmd and enter NPM install less-G. The interpretation mode applies to development, while the compilation mode applies to release and release. The combination of the two is impeccable. Coffee installation is similar.

Author: front-end group-Elliot