如何將屬性名稱作爲參數傳遞給mixin

Question

我想創建一個函數/ mixin，如果它已經很暗但是較亮時會使顏色變深（正常化/極化？）

是否有可能通過傳遞屬性名稱（顏色，背景顏色，邊框右側顏色等）來做到這一點？

.normalize(@color, @amount, @prop: "color") when (lightness(@color) >= 50%) 
{ 
    @prop:lighten(@color, @amount); 
} 
.normalize(@color, @amount, @prop: "color") when (lightness(@color) < 50%) 
{ 
    @prop:darken(@color, @amount); 
} 

Answer 1

這是當前在less.js github上的一項功能請求。所以看出來它在less.js 1.4 ..在那之前，你可以像這樣本事......

.mixin(@prop, @value) { 
    Ignore: ~"a;@{prop}:@{value}"; 
} 

不怎麼樣，你會得到一個額外的屬性，但目前它的唯一途徑。

Answer 2

守衛Mixins應該是你要找的，但是你不能使用變量來定義屬性，只有它們的值。所以，你可以做這樣的：

.normalize(@color, @amount) when (lightness(@color) >= 50%) 
{ 
    color:lighten(@color, @amount); 
} 

.normalize(@color, @amount) when (lightness(@color) < 50%) 
{ 
    color:darken(@color, @amount); 
} 

所以這個：

.class1 { 
    .normalize(#ddd, 10%); 
} 

將輸出這樣的：

.class1 { 
    color: #f7f7f7; 
} 

但你不能真正傳遞一個屬性名作爲一個變量。不幸的是，這是一個限制，雖然我已經看到了像邊緣方向這樣的方法，但是沒有辦法通過使用變量來傳遞任何ol屬性。

Answer 3

在上少GitHub上的相應issue有由cloudhaed提出了一個解決辦法：

.blah()  { color: black }     // All blahs 
.blah(right) { padding-right: 20px }   // Right blahs 
.blah(left) { padding-left: 20px }   // Left blahs 

@side: left; 
.class { .blah(@side) } 

輸出

.class { color: black; padding-left: 20px;} 

也許這將怎麼辦？