I'm looking for some kind of if-statement to control the background-color
of different div
elements.
I have tried the below, but it doesn't compile
@debug: true;
header {
background-color: (yellow) when (@debug = true);
#title {
background-color: (orange) when (@debug = true);
}
}
article {
background-color: (red) when (@debug = true);
}
There is a way to use guards for individual (or multiple) attributes.
@debug: true;
header {
/* guard for attribute */
& when (@debug = true) {
background-color: yellow;
}
/* guard for nested class */
#title when (@debug = true) {
background-color: orange;
}
}
/* guard for class */
article when (@debug = true) {
background-color: red;
}
/* and when debug is off: */
article when not (@debug = true) {
background-color: green;
}
...and with Less 1.7; compiles to:
header {
background-color: yellow;
}
header #title {
background-color: orange;
}
article {
background-color: red;
}