1. 使用@新建变量
@link-color: #428bca; // sea blue
@link-color-hover: darken(@link-color, 10%);
在css中使用变量:
.link { color: @link-color;}
2. Mixins
首先定义样式:
.bordered {
border-top: dotted 1px black;
border-bottom: solid 2px black;
}
以后可在其他代码块中重复使用:
#menu a {
color: #111;
.bordered();
}.post a {
color: red;
.bordered();
}
3. 嵌套的新写法
原先的
#header {
color: black;
}
#header .navigation {
font-size: 12px;
}
可以改写为嵌套写法:
#header {
color: black;
.navigation {
font-size: 12px;
}
.logo {
width: 300px;
}
}
4. 对于某一元素的伪选择器的样式,也可以使用 ‘&’ 嵌套在该元素的代码块中
.clearfix {
display: block;
zoom: 1;
&:after {
content: " ";
display: block;
font-size: 0;
height: 0;
clear: both;
visibility: hidden;
}
}