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