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";