前言
写CSS时总会产生大量重复代码,复用率极低,于是简单学习了LESS,让CSS的编写也模块化,灵活化起来
1.变量(Variables)
@name:value;声明变量,不能改变,不能重复声明
1.1变量插值{} 用大括号,此时不用加@
1.2懒加载 同一个作用域生命的变量,后面覆盖前面
1.3拓展
2.混合(Minins)——不强调层级
将一个选择器当作属性应用在另一个选择器内,则前一个选择器内的属性就会展开在后一个选择器内
2.1语法.a()=.a
2.2想用一个混合属性但不想其最终应用出来,可以在名字后面加()
2.3 伪类/伪元素选择器也会被展开
2.4条件混合#namespace when(@mode=huge)
2.5 !important关键字,将所有展开的所有属性标记为!important
2.6给混合器传参/设置默认值
2.7多个参数,用分号分隔,如果形参匿名传则按位置赋值,如果参数按变量名字传,则按变量名一一对应赋值
2.8 @arguments,在mixins内引用代表传进来的所有参数
2.9 @rest接受可变数量的参数,可以用@rest接收
2.10模式匹配:如果形参不是变量,传进去的时候如果不一样就不匹配,变量匹配所有实参
2.11模拟函数
3.嵌套——强调层级
子元素的样式可以直接写在父元素的样式内部,不需要选择器嵌套单独写
4.嵌套指令会冒泡@media @supported@document
指定一个选择器在不同情况下的属性不同,可以把不同情况下的样式写在这个选择器下,编译后,选择器和对应的样式会设置在不同的指令下
@font-face @keyframes 指令会直接冒泡到外层,因为其不依赖属性
5.操作符
可以对单位使用+-*/计算,也可以将变量当作操作符对象,单位要注意
6.转义
~‘anything’引号内的字符串不会有任何变化
7.函数
内置了一些函数
8.命名空间
想访问对象属性一样引入某一封装好的对象样式,用id选择器作为名字可以避免被覆写
9.作用域
内层变量覆盖外层变量
10.注释,同js注释语法
11.导入
@import “xxx”