I have the following array of color definitions:
@colors: ~"black" #000, ~"white" #fff, ~"blue" #008FD6, ~"bluehover" #44A1E0, ~"grayborder" #DBDBDB;
And I use the following function to use those colors within CSS declarations.
.colorkey(@key) {
.-(length(@colors));
.-(@i) when (@i > 0) {.-((@i - 1))}
.-(@i) when (@key = extract(extract(@colors, @i), 1)) {
@colorkey: extract(extract(@colors, @i), 2);
}
.--() {@colorkey: #000} .--;
}
Usage:
.my-div {
.colorkey(~"black");
color: @colorkey
}
However I'd prefer to use the mixin like so:
.colorkey(black);
Without the quotes and tilde. Is it possible to modify the colorkey mixin to achieve this?
Thanks!
If your @colors
can be defined without putting the color names in ~"..."
, you just need to make a minor change:
@colors: black #000, white #fff, blue #008FD6, bluehover #44A1E0, grayborder #DBDBDB;
.colorkey(@key:black) {
.-(length(@colors));
.-(@i) when (@key = extract(extract(@colors, @i), 1)) {
@colorkey: extract(extract(@colors, @i), 2);
}
.-(@i) when (@i > 0) {.-(@i - 1)}
}
.my-div {
.colorkey(bluehover);
color: @colorkey
}
Note that I
.-(@i) when (@i > 0)
.colorkey
, and .--() {@colorkey: #000} .--;
and in its place used .colorkey(@key:black) {
. (My guess is that was supposed to make .colorkey; color: @colorkey
evaluate to color: #000
but actually it wasn't doing anything :) In the code you provided, to define that default you'd need instead to do .colorkey(@key: ~"black") {
)
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.