"Quoting" argument variable in LESS mixin

Question

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?

henry · Answer 1 · 2016-09-12T17:14:25.477

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

removed the extra set of parentheses in your .-(@i) when (@i > 0)
moved that recursive call to the end of .colorkey, and
dropped your .--() {@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") { )

"Quoting" argument variable in LESS mixin

1 Answers1