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.
Now about less files.
PS I removed url becouse need more reputation to post it. PPS I'm very sorry for my english :(
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
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.