JavaScript Web Applications

Appendix B. CSS Extensions

In the words of its author, Alexis Sellier, Less is a “dynamic stylesheet language, which builds upon CSS’s syntax.” Less is a superset of CSS that extends it with variables, mixins, operations, and nested rules.

It’s great because it can really reduce the amount of CSS you need to write—especially when it comes to CSS3 vendor-specific rules. You can then compile your Less files down to pure CSS.

In other words, instead of writing this:

 .panel {
   background: #CCC;
   background: -webkit-gradient(linear, left top, left bottom, from(#FFF), to(#CCC));
   background: -moz-linear-gradient(top, #FFF, #CCC);
 }

You can write this:

  .panel {
    .vbg-gradient(#FFF, #CCC);
  }

Variables

If you’re reusing colors and rule attributes, using Less variables allows you to amalgamate them in one place, letting you make global changes without a find and replace!

Specifying a variable is easy:

@panel-color: #CCC;

Then, you can use it inside your style rules:

header {
  color: @panel-color;
}

Mixins

Less mixins behave a lot like C macros. Basically, you define a mixin, which can take optional arguments, like so:

.vbg-gradient(@fc: #FFF, @tc: #CCC) {
  background: @fc;
  background: -webkit-gradient(linear, left top, left bottom, from(@fc), to(@tc));
  background: -moz-linear-gradient(top, @fc, @tc);
  background: linear-gradient(top, @fc, @tc);
}

The example above takes two arguments, fc and tc, with default values of #FFF and #CCC, respectively. These are then interpolated in the class contents. Think of it ...