更少：按變量值混合和變量名稱

Question

我試圖做更容易從svg文件生成圖標。 （並且還會生成png精靈后備廣告以支持ie8）。 使用grunt.js及更少。

這個想法在bu 2gis.ru中得以實現： http ://www.slideshare.net/codefest/codefest-2014-2（俄語），但我只有這張幻燈片和使用的技術名稱：node.js，npm，grunt， js，更少。

看它的一部分代碼，表明我想要什么：

現在，我制作此模板： https : //github.com/andrey-hohlov/template-mark-up （如果要克隆，則需要使用“ npm install”）

一步不起作用。

1. 將svg-icons放在github.com/andrey-hohlov/template-mark-up/tree/master/assets/dev/img/svg-icons中
2. 將png圖標放入github.com/andrey-hohlov/template-mark-up/tree/master/assets/dev/img/png-icons
3. 使用咕unt聲
4. 所有在github.com/andrey-hohlov/template-mark-up/tree/master/assets/build/img中創建的精靈
5. .less文件在github.com/andrey-hohlov/template-mark-up/tree/master/assets/dev/css/less/mixins/bg-icon/temp中創建它由spritesmith制作，我無法更改它

現在，文件減少了。

1. github.com/andrey-hohlov/template-mark-up/blob/master/assets/dev/css/less/mixins/bg-icon/temp/datauri.less包含svg圖標的base64代碼。 基於文件名的類名，我只能設置后綴和前綴
2. 像github.com/andrey-hohlov/template-mark-up/blob/master/assets/dev/css/less/mixins/bg-icon/temp/sprite.datauri.less之類的文件包含mixins和創建sprite css的變量（用於png圖標）。 我為svg圖標創建了一個精靈，以減少其寬度和高度（datauri任務僅提供base64）。
3. github.com/andrey-hohlov/template-mark-up/blob/master/assets/dev/css/less/mixins/bg-icon/bg-icon.less中的問題 。 有2個mixins-用於svg和png圖標。 我需要將其與parametr“ filename”結合使用來為圖標創建css，但是我不知道如何！ 我在這里發表評論。

PS我刪除了url，因為需要更多信譽才能發布。 PPS我很抱歉我的英語:(

Answer 1

好吧。

我如何通過另一個變量值使用混合名稱和變量名稱

所以：

（1）。 要使用存儲在另一個變量中的名稱來引用變量，請使用“變量引用”語法，例如：

#example {
    @banana: 22px;
    @potato: "banana";

    width: @@potato; // -> 22px
}

（2）。 您不能通過變量中設置的名稱來調用mixin，因此要使用變量“ Pattern Matching”根據變量值有選擇地調用mixin，例如

.mixin("banana", @values...) {
    color: @values;
}

.mixin("potato", @values...) {
    background-color: @values;
}

#usage {
    .mixin("banana", tomato); // -> color: #ff6347
    .mixin("potato", wheat);  // -> background-color: #f5deb3
}

如果您不能修改這些混合-生成包裝器：

.mixin(peach) {.mixin-peach()}

#usage {
    @variable: peach;
    .mixin(@variable); // invokes .mixin-peach
}