Say I have three separate color schemes that are used on various pages in a site. Each color has a a light, medium and dark tint defined, and the color scheme is defined by a class in the body. Assume that the "red" color scheme is the default. Like this:
Color Definitions:
@red-lt: #121;
@red-md: #232;
@red-dk: #343;
@green-lt: #454;
@green-md: #565;
@green-dk: #676;
@blue-lt: #787;
@blue-md: #898;
@blue-dk: #909;
Basic Default Style Example
body { background-color: @red-dk;
#container { background-color: @red-md;
p { color: @red-dk; }
}
}
Different Color Scheme Style Example
body.green { background-color: @green-dk;
#container { background-color: @green-md;
p { color: @green-dk; }
}
}
I'd like to use variables so that I don't have to re-write all of the color variations for each scheme, so that I can just write something like this:
body.[color-var] { background-color: @[color-var]-dk;
#container { background-color: @[color-var]-md;
p { color: @[color-var]-dk; }
}
}
…but I can't quite wrap my head around how to accomplish that. Help…?
Use interpolation and escaping, parentheses in the selector and parametric mixins to get the desired effect:
"@{variable}"
is replaced with the value of the variable. They can also be nested: Given @{@{var}-foo}
and @var: bar;
, the result is "barfoo"
.~
.body.@{var}
turns into body.bar
.Example:
@red-md: #232;
@red-dk: #343;
.setColor(@color) {
body.@{color} { background-color: ~"@{@{color}-dk}";
#container { background-color: ~"@{@{color}-md}";
p { color: ~"@{@{color}-md}"; }
}
}
}
.setColor(~"red"); // Escape to prevent "red" turning "#FF0000"
//.setColor(~"blue"); etc..
Turns into:
body.red {
background-color: #334433;
}
body.red #container {
background-color: #223322;
}
body.red #container p {
color: #223322;
}
Note: When the answer was originally written, selector interpolation did not exist. See the previous revision for the solution if you're working with an old LESS compiler (before LESS 1.3.1a). Support for the old method will be dropped in LESS 1.4.0.