less test

index.html

<div class="test">test div</div>


<div class="test-2">test div</div>

less-test.markdown

less test

A Pen by Jeremy Levy on CodePen.

License.

style.less

/* define a global 'switch' */
@switch: four;

/* define the cases here */
.mixin(three;) {
  color: green;
}
.mixin(four;) {
  color: blue
}

/* this is like the funciton that takes the argument @_ */
.mixin(@_;) {
  display: block;
}



/* this is the main class that calls the function */
.test {
  .mixin(@switch);
}



/* less gaurds ----------------------------------------------------------- */
// .four() {
//   color: red;
// }
// .three() {
//   color: blue;
// }
.test-2 {
  .four() when (@switch=four) {
    color: red;
  }
  .three() when (@switch=three) {
    color: green;
  }
  .three();
  .four();
}