Notes: Simple use of Less (css preprocessor)

Less includes a set of custom grammars and a parser. Users define their own style rules based on these grammars. These rules will eventually be compiled and generated by the parser to generate the corresponding CSS files.

• variable

format

@变量名：值

不能包特殊字符，不能以数字开头，大小写敏感

• Nested

format

父级元素{
    
    
	css样式；
	子集元素{
    
    
		css样式
	}
}

1. Intersection|Pseudo-Class|Pseudo-Element Selector

If there is no ampersand before the inner selector, it will be parsed as the child of the parent.
If there is an ampersand, it will be parsed as the parent element itself or the pseudo-class of the parent element

父级元素{
    
    
	css代码；
	&：hover{
    
    
		css代码
	}
}

• Calculation

Any number, color or variable in Less can participate in the calculation

1. Spaces must be added to the left and right sides of the operator
2. Two numbers participate in the calculation, if only one has a unit, the final result will be based on this unit
3. If both numbers have units and are not the same, the final result is based on the first unit

距离运算

元素名称{
    
    
	width：200px + 50；
	height：82rem / @变量名
}

颜色运算

#666 - #444 结果是 #222

• mixing

元素名称a{
    
    
	css代码
}

元素名称b{
    
    
	元素名称a（）
}

元素名称b 里面也有元素名称a 的属性