CSS Itch: Ditch Sass, Embrace LESS

Writing stylesheets in plain CSS manually is no fun, especially when the structure of the page is constantly changing. So I use Sass to ease the pain. Basically, it allows me to write stylesheets in a nice syntax and compile to plain CSS files later. Suddenly creating stylesheets becomes a joy again: no longer do I need to repeat a long string of parent selectors, because nesting presents a natural hierarchy of the targeting pages; nor is it necessary to hard code redundant length, colors, or fonts in attributes, since variable substitution allows me to store those values centrally and refer to them later indirectly; and I can even mix in a whole set of CSS rules with a single line of code.

Sass itches

Unfortunately nothing is perfect. The more I write Sass, the more some little itches bother me. Normally, a colon is used to separate an attribute and its value, just like plain old CSS, which is fine. However, if I want to keep the value in a variable, I have to use an equal sign instead:

!grid_height = 22px            /* define a variable */
p
  line-height: 22px            /* colon */
p
  line-height= !grid_height    /* must use equal sign */

This is no big deal if I just write it and leave it that way, but it causes significant trouble when I try to refactor, because whenever I forget to change any colon to equal sign, the Sass file won't compile, and I have to find out which lines I forget to make the changes. This is so much pain that motivates me to hunt for alternatives.

Sass use indentation for code blocks just like Python. It eliminates braces and semicolons, and is atheistically appealing to Pythonista like me. But the problem is, if I ever want to reuse any existing CSS templates, I have to manually translate the brace-and-semicolon-based CSS syntax to Sass. The process is rather tedious and error-prone.

Another small itch I constantly have is the syntax of pseudo classes. It has to have an "&" sign before, which is unnecessary and looks ugly:

a
  &:link        /* why not omit the "&" sign? */
    text-decoration: underline
  &:visited
    color: #369

LESS to the rescue

Then I found LESS. It basically does everything Sass does, but instead of ditching CSS syntax completely, LESS tries to extend the CSS syntax and maintain backward compatibility. Here is how LESS avoids the problems I mentioned before:

@grid: 22px;                /* define a variable */
p { line-height: @grid; }   /* colon as in CSS */

a {
  :link { text-decoration: underline; }
  :visited { color: #369; }
}

And since LESS is a superset of CSS (as we all know, less is more :), I can copy and paste any old CSS code into my LESS file and immediately start tweak around. It just works.

The only problem I currently have with LESS is its import mechanism. LESS has its own @import statement to import both LESS files and CSS files. For example, it is quite common to have a separate reset style sheet.

@import "reset.css";
@import "typograph";  /* .less can be omitted */

Unlike CSS native @import statement, LESS will merge the content of imported file and produce a combined one, and currently there is no way to use CSS @import any more because LESS @import takes priority.

On a side note, I think it might be a better idea to use "$" sign instead of "@" sign for variables, since "$" is not used at all in CSS specification, but "@" is used quite often for statements like @import and @font-face. Well, this is a small tolerable itch.