一、变量:
@变量名:值;
@nice-blue: #5B83AD;
@light-blue: @nice-blue + #111;
#header {
color: @light-blue;
}
其实就是:
#header {
color: #6c94be;
}
二、混合模式:
将一系列属性从一个规则集引入(“混合”)到另一个规则集的方式。假设我们有以下样式:
.bordered {
border-top: dotted 1px black;
border-bottom: solid 2px black;
}
我们希望在另一个规则集内部使用上面这些属性。那么,我们就只需要访问我们想要的属性所在类的名称即可,就像下面这样:
#menu a {
color: #111;
.bordered;
}
.post a {
color: red;
.bordered;
}
三、嵌套规则
#header {
color: black;
.navigation {
font-size: 12px;
}
.logo {
width: 300px;
}
}
&引用父选择器,在应用修改类或者应用伪类给先用的选择器;
&代表所有的父选择器(而不只是最近的长辈)
a {
color: blue;
&:hover {
color: green;
}
}
等同于:
a {
color: blue;
}
a:hover {
color: green;
}
&可以扩展指定元素所有的可能组合;
p, a, ul, li {
border-top: 2px dotted #366;
& + & {
border-top: 0;
}
}
等同于:
p,
a,
ul,
li {
border-top: 2px dotted #366;
}
p + p,
p + a,
p + ul,
p + li,
a + p,
a + a,
a + ul,
a + li,
ul + p,
ul + a,
ul + ul,
ul + li,
li + p,
li + a,
li + ul,
li + li {
border-top: 0;
}
合并
merge需要在每个待加入的声明中显示的设置一个+或者+_标记。
.mixin() {
transform+_: scale(2);
}
.myclass {
.mixin();
transform+_: rotate(15deg);
}
等同于:
.myclass {
transform: scale(2) rotate(15deg);
}