LESS 预处理器
变量:
&代表所有父选择器,也可以直接用于字符串中
@_匹配任何值
@nice-blue: #5B83AD;
@light-blue: @nice-blue + #111;
#header { color: @light-blue;}
用在字符串、选择器、属性时使用{},如.@{my-selector} {}
可向变量名定义变量
当变量的值是{css规则}时,调用需要加(),且这样的变量可作为参数
扩展:
nav ul {
&:extend(.inline);
background: blue;
}/*将nav ul选择器附加到.inline后面,扩展必须是最后一个伪类*/
:extend(.class all)扩展到所有能匹配.class中,没有all必须精确匹配才扩展
混合:
.mixin { .a;}复制.a的属性,.a不能用HTML标签替代
.a(){} 表示.a自身并不输出属性,可以返回规则或变量
当()时直接量时可用做switch选择
通过when关键字来做有条件的混合,混合中用when可构成loop循环
嵌套,它现在不是模仿HTML 的结构.
#header {
color: black;
&::after { ... }
}
.screencolor {
@media screen {
color: green;
@media (min-width: 768px) {
color: red;
}
}
}
@media screen {
color: green;
@media (min-width: 768px) {
color: red;
}
}
}
运算
+-*/
各种颜色函数、is类函数(用在when中)
属性合并
属性名加+表示混合进的属性会,逗号合并
属性名加+_表示混合进的属性会 空格合并
转义
content: ~"^//* some horrible but needed css hack";