CSS is invaluable for web development. However, the standard CSS specification has one major weakness: it is rather primitive and rudimentary. Almost each CSS rule has to be written separately. In serious web development, this can be limiting.
Experienced developers know how important programming features like variables, branching statements, loops and functions can be. Unfortunately, the standard CSS specification doesn’t have inbuilt support for such features. This is where CSS preprocesors come in handy.
A CSS pre-processor (aka a CSS generator) is used to generate CSS code. It enables you to express your ideas in programmatic terms like variables, loops and the like. It then transforms these into CSS code. This makes building complex features using CSS much easier. Once you have the generated CSS, just link the generated stylesheet to your HTML page. It works just like any stylesheet.
There are three major CSS generators on the market. These are SASS (Stylistically Awesome Stylesheets), Less and Stylus. Although each has a different syntax, they share some similar features. Even then, to decide which one is better requires comparison of CSS generators. Below is a look at each of the three.
SAAS is the most popular CSS generator on the market. Its popularity arises partly from being one of the first preprocessors ever built. However, developers love it for its flexibility. SAAS provides three types of syntax for writing the code.
First of all, you can write it in standard CSS syntax. This is basically an extension of CSS3. This means that as long as you are familiar with CSS, you can get started immediately.
Secondly, you can write it in SAAS syntax. This replaces the usual CSS curly braces for demarcating code sections with indenting. This option is handy for someone with a background in an indent-based programming language like Python.
Thirdly, you can use a scripting language called SaasScript. This is a powerful scripting language which offers ready-made tools for manipulating numbers, strings, lists and so on. SaasScript offers much more flexibility, power and extensibility.
The main advantage of SAAS is that it is powerful, flexible and popular. Its popularity means that there is lots of support. SAAS also has excellent debugging tools.
Its main downside it is quite complicated to set up and use. This is because it runs on Ruby. If you are a Ruby developer, then it is fine. If you aren’t, setting it up can be quite difficult. SAAS also has a fairly steep learning curve (compared to LESS). However, it is much easier to learn when compared to Stylus.
Less is a preprocessor which is actually based on SAAS. It was created to provide a simpler alternative to SAAS. As such, it is much easier to learn. This is partly because its syntax is quite intuitive. Anyone with a good grasp of CSS won’t have much trouble with LESS.
The main advantage of LESS is that it has excellent support. This includes support in different languages besides English. It also has clear documentation. The documentation has straightforward descriptions, and lots of clear examples. This further softens the learning curve.
LESS is used to define styles in the popular Boostrap framework. Therefore, if you use Bootstrap, you’ll find LESS a breeze. During development, you can run LESS via command-line using either Mozilla’s Rhino or Node.js. This makes it user-friendly for fans of command-line programming.
The main downside of LESS is its conditional statements are quite rudimentary. Unlike SAAS and Stylus which use standard if/else statements, LESS uses “when” statements. The “when” statements aren’t just less powerful than if/else statements, they are also harder to understand. LESS’ support for inheritance is also less powerful when compared to SAAS and Stylus.
However, LESS’ biggest weakness is the absence of debugging tools. This makes debugging a pain. Debugging SAAS is far much easier.
Stylus is actually the closest thing to a fully fledged programming language for CSS. This is because it offers more than just standard preprocessor features like variables, loops and conditional statements. Stylus enables you to define reusable functions. This offers smarter management of CSS parameters.
Stylus also offers powerful features like interpolation (which enables you to move through lists and strings), transparent mixins (which enables you to define functions which work with different parameters) and introspection (where a code is aware of its environment, and thus behaves differently in different code blocs).
The preprocessor also has support for different data types including numbers, strings and lists. It offers a Python-like syntax (using indentation instead of curly braces) and pattern-matching for lists and strings. It even offers autocompilation middleware which can compile and compress your CSS on the fly.
The main advantage of Stylus is that it is extremely powerful. In fact, when it comes to raw power and flexibility, it beats SAAS and LESS by some mile. However, this power comes of the price. Among the three CSS generators, Stylus is by far the most difficult to learn. It also has a relatively small developer community, which further stiffens the learning curve.
In a nutshell, that is a brief comparison of CSS generators. So, how does one chose between SAAS, LESS and Stylus? Well, it depends on your needs. If you want to get up and running very fast (or are familiar with the Bootstrap framework), then LESS is the perfect choice. If you are a Ruby on Rails developer, or desire more flexibility, then SAAS is the best choice. If you want full programmatic control of your CSS (and are willing to put in some hard work) then Stylus is the perfect choice.