Less包含一套自定义的语法和一个解析器,用户根据这些语法定义自己的样式规则,这些规则最终会通过解析器,编译生成对应的CSS文件
- 变量
格式
@变量名:值
不能包特殊字符,不能以数字开头,大小写敏感
- 嵌套
格式
父级元素{
css样式;
子集元素{
css样式
}
}
- 交集|伪类|伪元素选择器
内层选择器前如果没有 & 符号,会被解析为父系的子代
如果有 & 符合,会被解析成父元素自身或者父元素的伪类
父级元素{
css代码;
&:hover{
css代码
}
}
- 运算
Less里的任何数字,颜色或者变量都可以参加运算
- 运算符左右两侧必须加空格
- 两个数参与运算,如果只有一个有单位,则最后的结果就以这个单位为准
- 如果两个数都有单位,且不一样,最后的结果以第一个单位为准
距离运算
元素名称{
width:200px + 50;
height:82rem / @变量名
}
颜色运算
#666 - #444 结果是 #222
- 混合
元素名称a{
css代码
}
元素名称b{
元素名称a()
}
元素名称b 里面也有元素名称a 的属性