Some Lesser Known Features of LESS

For the last year or so, LESS has gained a lot of traction in the front-end development community, particularly among designers. LESS extends CSS with dynamic functionality and organizational features, which provide a lot of power and efficiency to designers and developers. However, it's not the only CSS pre-processor player out there. The other major one is Sass, which is very similar, and both are solid options to consider.

Many of the review articles out there do a good job of providing an in-depth look at syntax and general usage, but I'd like to take a different angle—highlight one difference that isn't written about all that much, and present a few features of LESS that have have proved very valuable on recent projects.

No Barriers

One difference that isn't discussed much is that the barrier of entry is very low for LESS. Sass requires Ruby, and the Sass gem must be installed to get up and running. While not a huge list of requirements (especially for Mac users, since Ruby is already installed), this can potentially put off those who are not comfortable with the command line. With LESS, there are no dependencies, and there is nothing to install. To get LESS up and running, just download less.js from lesscss.org, and add two lines of code to your markup:

<link rel="stylesheet/less" type="text/css" href="styles.less">
<script src="less.js" type="text/javascript"></script> 

* Note the rel attribute of the link tag.

BOOM! You're all set. Write regular CSS in your .less file(s), start using variables and mixins, and you are good to go. Once your site is ready for deployment, compile to CSS¹, and replace the above lines with a reference to the compiled CSS file.

Live Browser Updates

LESS has a built-in “watch” feature that auto-reloads the CSS in the browser without reloading the entire browser window². There's no need to install any third-party directory watcher apps for this to work. To enable this while developing, add the following lines to your markup:

<script type="text/javascript" charset="utf-8">
  less.env = "development";
  less.watch();
</script>

Implicit Mixins FTW

In other words, any class defined in your .less files can be used as a mixin. Combine this with LESS's already super-simple mixin syntax, and you've got a winner! Using HTML5 Boilerplate's .ir class as an example, you can reference the .ir class as if it were a mixin, instead of adding the classes to your markup.

.ir {
  display: block;
  border: 0;
  text-indent: -999em;
  overflow: hidden;
  background-color: transparent;
  background-repeat: no-repeat;
  text-align: left;
  direction: ltr;
}
.heading {
  .ir;
  background-image: url(image.png);
  height: 50px;
  width: 150px;
}

Namespaces

Namespaces allow for bundling groups of mixins together for organizational purposes. The example on the LESS site isn't a great one, so here's an example for CSS3 gradients.

#gradient {
  .horizontal (@startColor: #555, @endColor: #333) {
    background-color: @endColor;
    background-repeat: repeat-x;
    /* browser prefixed gradients here */
    background-image: linear-gradient(left, @startColor, @endColor);
  }
  .vertical (@startColor: #555, @endColor: #333) {
    background-color: @endColor;
    background-repeat: repeat-x;
    /* browser prefixed gradients here */
    background-image: linear-gradient(@startColor, @endColor);
  }
  .directional (@startColor: #555, @endColor: #333, @deg: 45deg) {
    background-color: @endColor;
    background-repeat: repeat-x;
    /* browser prefixed gradients here */
    background-image: linear-gradient(@deg, @startColor, @endColor);
  }
}
.box1 {
  #gradient > .horiontal;
}
.box2 {
  #gradient > .vertical(#ccc, #aaa);
}

Continuing From Here

So, how have you used LESS recently? Which features or techniques have been valuable to you? If you want to check out some other resources, be sure to look at Preboot, Twitter Bootstrap, and Less.app.

¹ The easiest way to compile to CSS is via the command line or with Less.app. You can also compile with node.js.

² This only works when browsing files on the local filesystem, and in a browser other than Chrome (because of a known issue in Chrome with loading local JavaScript files).