更少：按变量值混合和变量名称

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
}