MENU


CSS Guards

A guard, specified with the keyword 'when', is used to set a condition for a ruleset to be produced.
If you wish to choose a group of selectors, you should use & when (...){...}.
To join the conditional clauses with "OR", use a comma , . 
@show-button: true;
@x: 100;
@y: 50px;

button when (@show-button) and (@x = 100) and (@y =< 100px) {
   background: yellow;
}

& when (isunit(@x)), (iscolor(@x)), (isstring(@x)), (iskeyword(@x)), not (isnumber(@x)) {
   span { color:red; }
   a { color:green }
}

button {
  background: yellow;
}