命名空間
有時候掺冠,你可能為了更好組織CSS或者單純是為了更好的封裝炼幔,將一些變量或者混合模塊打包起來, 你可以像下面這樣在#bundle中定義一些屬性集之后可以重復使用:
#bundle {
.button () {
display: block;
border: 1px solid black;
background-color: grey;
&:hover { background-color: white }
}
.tab { ... }
.citation { ... }
}
你只需要在 #header a中像這樣引入 .button:
#header a {
color: orange;
#bundle > .button;
}
作用域
LESS 中的作用域跟其他編程語言非常類似吕嘀,首先會從本地查找變量或者混合模塊法褥,如果沒找到的話會去父級作用域中查找历葛,直到找到為止.
@var: red;
#page {
@var: white;
#header {
color: @var; // white
}
}
#footer {
color: @var; // red
}