LESS：通过变量值混合和变量名称

Question

我正在尝试更轻松地从svg文件生成图标。 （并且还生成png-sprite后备以支持ie8）。 使用grunt.js和更少。

这个想法实现了bu 2gis.ru： http://www.slideshare.net/codefest/codefest-2014-2（俄语），但我只使用这些幻灯片和技术名称：node.js，npm，grunt，js，less。

看一下代码的一部分，显示我想要的东西：

现在我制作这个模板：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-icons放入 github.com/andrey-hohlov/template-mark-up/tree/master/assets/dev/img/png-icons
3. 使用grunt
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 包含base64代码对于svg图标。基于文件名的类名，我只能设置后缀和前缀
2. 像 github.com/andrey-hohlov/template-mark-up/blob/master/assets/dev/css/less/mixins/bg-icon/temp/sprite.datauri.less 包含mixins和变量来创建精灵css（用于png图标）。我为svg图标创建sprite，从而减少宽度和高度（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图标。我需要使用参数“文件名”来创建图标的CSS，但我不知道如何！我把评论放在那里。

P.S。我删除了网址因为需要更多的声誉才能发布。 P.P.S.我很抱歉我的英语:(

Answer 1

好的。

  

我如何使用另一个变量值的mixin名称和变量名称

所以：

（1）。要通过名称存储在另一个变量中来引用变量，请使用"Variable Referencing"语法，例如：

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

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

（2）。您无法通过变量中的名称设置调用mixin，因此要根据变量值选择性地调用mixin，请使用"Pattern Matching"，例如

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

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

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

如果你不能修改那些mixins - 生成包装器：

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

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