帶參數(shù)混合
在 LESS 中岭佳，你還可以像函數(shù)一樣定義一個帶參數(shù)的屬性集合:
.border-radius (@radius) {
border-radius: @radius;
-moz-border-radius: @radius;
-webkit-border-radius: @radius;
}
然后在其他class中像這樣調(diào)用它:
#header {
.border-radius(4px);
}
.button {
.border-radius(6px);
}
我們還可以像這樣給參數(shù)設(shè)置默認(rèn)值:
.border-radius (@radius: 5px) {
border-radius: @radius;
-moz-border-radius: @radius;
-webkit-border-radius: @radius;
}
所以現(xiàn)在如果我們像這樣調(diào)用它的話:
#header {
.border-radius;
}
radius的值就會是5px.
你也可以定義不帶參數(shù)屬性集合,如果你想隱藏這個屬性集合檀何，不讓它暴露到CSS中去击敌，但是你還想在其他的屬性集合中引用，你會發(fā)現(xiàn)這個方法非常的好用:
.wrap () {
text-wrap: wrap;
white-space: pre-wrap;
white-space: -moz-pre-wrap;
word-wrap: break-word;
}
pre { .wrap }
輸出:
pre {
text-wrap: wrap;
white-space: pre-wrap;
white-space: -moz-pre-wrap;
word-wrap: break-word;
}
@arguments 變量
@arguments包含了所有傳遞進(jìn)來的參數(shù). 如果你不想單獨(dú)處理每一個參數(shù)的話就可以像這樣寫:
.box-shadow (@x: 0, @y: 0, @blur: 1px, @color: #000) {
box-shadow: @arguments;
-moz-box-shadow: @arguments;
-webkit-box-shadow: @arguments;
}
.box-shadow(2px, 5px);
將會輸出:
box-shadow: 2px 5px 1px #000;
-moz-box-shadow: 2px 5px 1px #000;
-webkit-box-shadow: 2px 5px 1px #000;
