DRYer CSS with LESS or Sass

Posted by Werner Schuster on Jul 24, 2009

Sections

Development,

Architecture & Design

Topics

Runtimes ,

Language Design ,

Syntax ,

Ruby ,

Domain Specific Languages ,

Ruby on Rails

Tags

CSS ,

DSLs ,

Parsing

CSS is ubiquitous in web development - but it can be repetitive at times. LESS and Sass are languages with Ruby implementations that allow to write better factored CSS files. Their approach is quite similar: an input language that is similar but more powerful than CSS is translated into CSS.

The feature set that both languages add over CSS is similar, see the LESS docs or Sass docs for details. Here a rough overview:

• Variables: @name in LESS or !name in Sass are variables. It's possible to assign values and use them around the file.
• Nesting: brings another desired feature to CSS: nesting selectors inside others, instead of having to unroll the nesting into several top level selector definitions. The LESS and Sass translators expand this concise notation into CSS.
• Mixins: allow to extract common groups of properties, name them and then include them in selectors. Ruby developers who know the benefits of Mixins in Ruby will recognize the utility of Mixins in CSS. Sass also allows to parameterize Mixins, which adds some extra flexibility.
• Operations: both LESS and Sass allow for simple arithmetic operations such as adding values, which becomes useful with variables to make CSS files more flexible. The languages take care to make sure units are preserved correctly in operations (ie. font sizes, etc).

Sass is built by the same team that created Haml. Sass uses Haml's idea of using indentation instead of explicit delimiters, like braces, to define blocks or nesting levels.
Sass' hand written parser and translator turn Sass into CSS with variable values replacing their references, mixins expanded etc.

LESS was inspired by Sass and lists its reason to exist as such:

So why make an alternative to Sass? It's simple: syntax. One of the key features of Sass is its indentation-based syntax, which gives you curly-brace and semi-column free code. But the cost of this is having to learn a new syntax and having to rebuild your current stylesheets.

LESS embraces CSS, and any additional functionality it comes with, is integrated in such a way as to make it as seamless as possible. Thus, you can gradually move your CSS to LESS, or if you're only interesting in using variables, or operations, you aren't forced to learning a whole new language.

LESS' parser is written using TreeTop, a PEG parser generator written in Ruby (LESS TreeTop grammar).

LESS and Sass tools (compilers, APIs) can be installed as Gems and bring command line tools for compilation, but can also be used from Ruby code.

At the moment Sass seems to have the edge in its feature set. LESS, on the other hand, allows to gradually move existing CSS files over to LESS instead of having to convert them completely into the Sass format. Nathan Weizenbaum, who maintains Sass, mentioned in a recent blog entry on LESS vs Sass that a future Sass release will offer the option of using braces instead of indentaion for nesting like CSS or LESS.

• Older >