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

Question

I'm trying to do generating icons from svg-files easier. (And also generate png-sprite fallback to support ie8). Use grunt.js and less.

That's idea realized bu 2gis.ru: http://www.slideshare.net/codefest/codefest-2014-2 (russian), but i have only this slides and name of technologies thay use: node.js, npm, grunt,js, less.

look it part of code, that show what i want:

Now i make this template: https://github.com/andrey-hohlov/template-mark-up (if you clone you need to use 'npm install')

One step not working.

1. Put svg-icons in github.com/andrey-hohlov/template-mark-up/tree/master/assets/dev/img/svg-icons
2. Put png-icons in github.com/andrey-hohlov/template-mark-up/tree/master/assets/dev/img/png-icons
3. Use grunt
4. All sprite created in github.com/andrey-hohlov/template-mark-up/tree/master/assets/build/img
5. .less files create in github.com/andrey-hohlov/template-mark-up/tree/master/assets/dev/css/less/mixins/bg-icon/temp It maked by spritesmith and I can't change anything in it

Now about less files.

1. github.com/andrey-hohlov/template-mark-up/blob/master/assets/dev/css/less/mixins/bg-icon/temp/datauri.less contain base64 code for svg icons. Class names based on file names, i can only set suffix and prefix
2. Files like github.com/andrey-hohlov/template-mark-up/blob/master/assets/dev/css/less/mixins/bg-icon/temp/sprite.datauri.less contain mixins and variables to create sprite css (for png icons). I create sprite for svg icons for take from it less width and height (datauri task give only base64).
3. Problem in github.com/andrey-hohlov/template-mark-up/blob/master/assets/dev/css/less/mixins/bg-icon/bg-icon.less . There is 2 mixins - for svg and png icons. I need use that with parametr "filename" to create css for icons, but i dont know how! I put there comments.

PS I removed url becouse need more reputation to post it. PPS I'm very sorry for my english :(

Answer 1

OK then.

how can i use mixin name and variable names by another variable value

So:

(1). To refer to a variable by its name stored in another variable use "Variable Referencing" syntax, eg:

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

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

(2). You can't call a mixin by name set in a variable, so to selectively invoke a mixin depending on a variable value use "Pattern Matching" , eg

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

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

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

If you can't modify those mixins - generate wrappers:

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

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