Less learning notes (2), less learning notes

Less learning notes (2), less learning notes

1. Scope: basically similar to the scope of javascrip, that is, finding local variables first and then global variables. Follow the proximity principle when searching for variables.

2. conditional expressions:
. Mixin (@ a) when (lightness (@ a)> = 50%) {// 255/2 = 127.5
Background-color: black;
}
. Mixin (@ a) when (lightness (@ a) <50% ){
Background-color: white;
}
. Mixin (@ ){
Color: @;
}
. Class1 {. mixin (# 7e7e7e)} // 221> 127.5> 50% background-color: black; 7e7e7e = 126
. Class2 {. mixin (#808080)} // 85 <127.5 <50% background-color: white; 808080 = 128

Iscolor, isnumber... determine the value type
. Mixin (@ a) when (iscolor (@ a) {// 255/2 = 127.5
Background-color: black;
}
. Mixin (@ a) when (isnumber (@ )){
Background-color: white;
Shuzi: shuzi;
}
. Mixin (@ ){
Color: @;
}
. Class1 {. mixin (# 7e7e7e)} // background-color: black;
. Class2 {. mixin (123)} // background-color: white;
In addition, there are: isstring, iskeyword, isurl

// Ispixel, ispercentage... unit check function
. Mixin (@ a) when (ispixel (@ )){
Background-color: black;
}
. Mixin (@ a) when (ispercentage (@ )){
Background-color: white;
}
. Mixin (@ ){
Width: @;
}
. Class1 {. mixin (960px)} // background-color: black; width: 960px
. Class2 {. mixin (95%)} // background-color: white; width: 95%
In addition, there are: isem, isunit

3. loop)
. Loop (@ counter) when (@ counter <7 ){
H @ {counter }{
Padding: (10px * @ counter );
} // The style code generated for each call
. Loop (@ counter + 1); // recursively calls itself
}

Div {
. Loop (1); // call the loop
}

4. Merge attributes
// + After merging, use commas to separate the attribute values.
. Mixin (){
Box-shadow +: inset 0 0 10px #555;
}
. Myclass {
. Mixin ();
Box-shadow +: 0 0 20px black;
}

// + _ After merging, the attribute values are separated by Spaces
. (){
Background + _: # f60;
Background + _: url ("/sss. jod ");
Background + _: no-repeat;
Background + _: center;
}
. Myclass {
. ()
}

5. import ):
@ Import "main. less"; // common import Method
@ Import (reference) "main. less"; // reference the LESS file, but no output
@ Import (inline) "main. less"; // reference the LESS file, but no operation is performed.
@ Import (once) "main. less"; // reference the LESS file, but no operation is performed.
@ Import (less) "index.css"; // whatever the format of the file, the file is operated as a LESS file
@ Import (css) "main. less"; // any file in any format uses it as a CSS file.
@ Import (multiple) "main. less"; // multiple, allows the introduction of multiple files with the same file name
// Add it later! The important keyword is added to all the compiled css attributes! The important keyword is used to increase the attribute weight.

6. function library
1) color (): parses the color and converts the string representing the color to the color value;
2) convert (): converts a number from one type to another. It can convert the length, angle (grad -- gradient, turn -- circle), and time unit.
Usage: convert (2 s, ms) // The result is 2000 ms
3) unit (): Remove or change the unit of the attribute value. Unit (100, px)/* 100px */unit (100px)/* 100 */
4) default (): it can only be used in the boundary condition. If no custom function (mixin) is matched, true is returned. Otherwise, false is returned.
5) escape (): encode the url special characters in the input string.
6) e () or ~ : Css escape, that is, output to css as is.
7) % (): formatted string, demo: font-family: % ("% a", "Microsoft", "Yahei"); // font-family: "" Microsoft "" Yahei "";
// A, A, d, and D can be replaced by any type of parameter; s and S can be replaced by parameters other than color values;, D will escape "% 22; s, S will ignore" output.
8) replace (): replace the text with another string ("/* original text */", "string to be replaced", "target string ");
9) length (): returns the number of entries in the set. length (1px solid red) // outputs 3.
10) extract (): returns the value of the specified index in the set. @ list/* a set */, extract (@ list, 1)/* returns the first value in the set, index starts from 1 */