SASS, LESS, Twitter Bootstrap, Bourbon, HAML, Slim

I've already addressed frontend technologies like HTML and CSS in this series. In the backend you're free to use whatever technology you want to use, it only has to be available for the platform you're working on. And even that is no restriction, since you can also choose your complete server stack as you want. It does not affect the user. You can write your backend code in 68K Assembler and run it on such a chip, if you want. The only common characteristic the system has to have is to speak the IP / TCP / HTTP protocol stack to deliver the content to web clients. Therefore, there are many different backend technologies, some newer, some older, with different philosophies and communities of different sizes and compositions.

The frontend-part is completely different. The World Wide Web has ever been designed for a diverse set of client software (browsers), which means a specific website is not to be made for a specific browser (although that happens all day). And this results in a need for standards. Standards, defining in what form a web server can deliver content so that every of those clients will be able to render it. Such standards are HTML, CSS, JavaScript in their various versions and modules. While you're able to use whatever programming language, technology, web server software and such you want in the backend, you're eventually bound to write HTML documents the browsers can handle (well, actually there are some unpopular alternatives like XSLT, we've seen).

Of course, such boundaries do not hold back smart hackers from improving everyday work and spending some diversity. SASS, LESS and HAML are perfect examples for such a process. While you're not able to replace CSS or HTML without all the major browsers supporting the replacement, you're definitely able to use different languages and finally translate them into what browsers understand. That's what SASS and LESS do for CSS and HAML does for HTML.

Let's first have a quick look at SASS (Syntactically Awesome Stylesheets). Its major features on top of CSS are Nesting, Variables, Mixins and the @import statement. Nesting means, e. g., instead of

#foo {
  color: lime;
}

#foo div {
  color: black;
}

you can write the following:

#foo {
  color: lime;

  div {
    color: black;
  }
}

Variables are useful to e. g. define and easily update a color variable instead of typing the same value over and over again. Mixins are a named collection of CSS rules, that can be included at any other position. They can also have (optional) parameters. And the @import statement includes other source files when compiled.

Compiled?! Sure. Since no browser is able to understand SASS, it has to be compiled into a CSS file, which may then be delivered. This can be done with the sass command line tool, which comes bundled in a Ruby gem. The example code above uses the newer SCSS syntax (Sassy CSS), which is just like CSS. This enables easy manual migration from and to plain CSS. Since SASS comes from a Ruby background, the initial SASS syntax stripped braces and semicolons in favor of indentation and newlines. Both are used today and only a matter of taste. They can easily be converted using the sass-convert tool included in the gem.

You can find a quick SASS tutorial at the official homepage. Besides preventing duplication, SASS is also great for common libraries. E. g. the SASS-based Compass framework defines a bunch of mixins to generate highly compatible CSS. Take gradients as an example:

@include background-image(linear-gradient(white, #aaa));

This will generate CSS code for a linear gradient from white to #aaa working in all the different browsers. Compass can even include an SVG version for browsers that do not support gradients, but SVG. It also includes the different vendor prefixes where necessary. Checkout the Compass reference.

A similar, newer, simpler and smaller alternative to Compass is Bourbon. It also includes nice-looking default styles for buttons, which brings us to Twitter Bootstrap. Bootstrap is a nice stylesheet library for simple web applications. It brings basic grid layouts and styles for every basic element you can imagine. It indeed enables development of small to medium applications without the need of a design. They can still look great afterwards. In addition, Bootstrap optionally provides what's called a responsive layout, i. e. it will collapse and show an optimized version on small environments like smartphones. Go to their website and narrow your browser window to see the effect.

Twitter's Bootstrap is based on LESS, which is in terms similar to SASS. LESS was initially a Ruby program, too, but was later re-implemented in JavaScript, which means you do not need to run it manually during development or automatically on the server (there are simple plugins for many backend frameworks like Ruby on Rails to compile SASS on-the-fly), but you could also download and compile it with JavaScript in the user's browser.

So much for CSS. Now, to conclude this, a look at HAML: HAML is for HTML what SASS is for CSS. It was even started by the SASS author, Hampton Catlin. The most important achievement of HAML in my eyes is that it strips angle brackets and end tags off of HTML tags and enables a short syntax for class names and IDs. Quick example:

<p id="foo" class="bar">Hello!</p>

With HAML, you can write:

%p#foo.bar Hello!

HAML, again, comes from a Ruby background, uses indentation and is meant to be used as a template engine for Ruby on Rails, but there are some ports and wrappers for other languages and of course, you can use it manually. Head over to the HAML tutorial to learn more about it. A newer HAML-competitor is Slim. It has a slightly different syntax, is said to be faster and quickly gained attention in the community. In the end it's again a matter of taste.

There are similar tools for JavaScript, I'll mention when I come to that.