是LESS中可變的mixin名稱嗎？

我想要做的是創建一個mixin，它接受參數並將一個或多個參數用作包含其他mixin的名稱。是LESS中可變的mixin名稱嗎？

因爲我不知道正確的術語，我會嘗試通過例子來解釋：

@gradients{ 
    light:#fafafa; //Should these also be prefixed with @? 
    dark:#888888; 
} 
@gradientBackground(@name,@height){ 
    background-image:url('../img/gradients/{@name}-{@height}.png'); //this works 
    background-color:@gradients[@name]; 
} 

.someBox{ 
    @gradientBackground(light;150); 
} 

//Expected result: 
.someBox{ 
    background-image:url('../img/gradients/light-150.png'); //This works 
    background-color:#fafafa; //This doesn't work. 
}

影像作品，但我還沒有想出如何從@gradients引用相應的顏色。這可能嗎？

來源

2010-11-10 jpeltoniemi

您不能使用@dark_gradient和@light_gradient嗎？ – 2011-03-25 10:17:53

我可以並最終做到了，但我一直在尋找更優雅的解決方案。我可以比較它在PHP或任何其他語言的數組。如果你有很多顏色需要存儲，你是否希望有一個單一的數組可以作爲一個組輕鬆訪問，並且對代碼或每種顏色都是不同的變量？ :) – jpeltoniemi 2011-03-28 14:03:47

我不認爲你需要@gradients變量。只需定義你的變量：

@light:#fafafa; 
@dark:#888888;

你的mixin不應該以@定義變量。 mixin基本上只是一個類。

.gradientBackground(@name:@dark, @height:500){ 
    background-image:url('../img/gradients/{@name}-{@height}.png'); 
    background-color:@name; 
}

只是作爲一個例子我設置的屬性的混入成爲高度的@dark顏色和500。

然後，當你想用你的mixin的另一個定義，它會像這樣：

.somebox { 
    .gradientBackground(@light, 150); 
}

因此，在這點是你使用的是混合料攪拌，你可以保留默認值，或通過新的（即：@光& 150）

希望幫助！

來源

2011-03-27 19:56:49

這就是我最終決定要做的。我問，因爲LessPhp文檔（http://bit.ly/8kBTyS）有點不清楚，當時沒有更好的例子。所以這更像是一個'我可以做這個'類型的問題:) 我的主要目標是通過在自己的mixin組中使用顏色和與主題相關的變量來使代碼更加乾淨，以便可以使用常見的名字，但我想這畢竟是不可能的。 – jpeltoniemi 2011-03-28 13:53:25

是LESS中可變的mixin名稱嗎？

回答

相關問題