Unfortunately, CSS has a number of limitations. It can easily become a mess of overrides and repetitions. At the same time, the simplicity of CSS often hinders the development process. The solution of this problem comes from CSS preprocessors. They add many useful features that are unavailable in CSS from the beginning. The most popular solutions are SASS and LESS. There are a lot of significant differences between them, but first of all we’re going to look how CSS preprocessors work in general.

CSS preprocessor languages can be processed into CSS, making it more feature rich. The preprocessor takes a text file, processes it, and outputs better CSS. Every individual preprocessor has its own algorithms, but both SASS and LESS or any other similar tool add the additional functionality to CSS specification. To write valid LESS and SASS, you just need to know CSS and learn a few new tricks.

Unfortunately, CSS doesn’t include variables. With variables, you can assign a value to a name, which will be a law for the stylesheet. You change the value only in one place, instead of working with the whole CSS file. You can easily add such functionality to CSS with the help of a CSS preprocessor.

Another advantage of CSS preprocessors is mixins. With their help you can embed properties of one class into another class, and use the new functionality throughout the stylesheet. In addition, you also get the ability to use functions. In CSS preprocessors, they work as in other programming languages but with some limitations.

One of the best principles of CSS preprocessors is pithiness. With CSS alone you always have to create bulky structures, but with variables, mixins, and functions of preprocessors you only have to write styles in one place, and then use them throughout the stylesheets.

In practice, the greatest benefit of CSS preprocessors tends to be reduced effort. The additional technology allows you to offload some of the tedious thinking and app-switching. For instance, you can store a commonly used color value as a variable rather than committing it to memory or hunting for it. And you can easily alter that color in a maintainable manner.

With the help of preprocessor, you can focus directly on writing styles. You don’t have to switch to the calculator to perform responsive arithmetic – this functionality is available directly in the stylesheet. And there is a compass, that can take care of sprites. As a result, styles are separated into modular files seamlessly. By using a CSS preprocessor, you reduce the number of distractions and keep your attention on solving implementation problems.

For some users the biggest problem of CSS preprocessor is the installation through the command line. Fortunately, you can easily avoid these issue by using browser based solutions or dedicated applications.

In-browser solutions

• With CodePen you get both Sass and LESS CSS preprocessors;

• jsFiddle provides you with Sass preprocessor;

• Try Stylus! – the name of this solution speaks for itself.

Applications for Mac, Windows, Linux

• Codekit – this app for Mac costs $25 and provide you with Sass, LESS and Stylus CSS preprocessors;

• Fire.app is designed for Mac, Windows and Linux. The application costs $14 and installs Sass;

• LiveReload – for $10 you will get Sass, LESS and Stylus on your Mac or Windows PC;

• Compass.app cost $10 and provides you with the access to Sass on Mac, Windows and Linux.

Less vs Sass

Both Less and Sass have their advantages and disadvantages. Each CSS preprocessor is good in the right circumstances. Among their common features are:

• Nesting capabilities
• Namespaces
• Mixins and parametric mixins
• JavaScript evaluations
• Color functions

The core difference between the two is in the languages, in which the preprocessors are coded. Sass is based on Ruby, while Less is a JavaScript library. Of course, there are some differences in the way these languages handle their common features.

Both CSS preprocessors provide you with the ability to use variable, but in Less, the @ symbol is used to preface variable names. In its turn in Sass, the $ symbol is used. At the same time, a semicolon is used to close the value for both, which is typical for CSS.

The only problem occurs with @, because the symbol has its meaning in CSS, and it can confuse newbies.

Talking about Inheritance, which allows one selector to inherit the properties of another selector, we should mention, that only Sass supports this feature. You can easily define multiple selectors with one set of properties in a case with this preprocessor. In Less, you will just get repeated properties once compiled into CSS.

Less features mixins – classes containing methods from other classes that are implemented in certain conditions. At the same time, the looping capabilities of Sass are far superior. They include both if-then-else statements, and while and for loops.

Another advantage of Sass is its ability to adapt to new units. This CSS preprocessor supports the work with unknown units. Unfortunately, Less doesn’t do this. Despite Sass depending with the math-related syntax error, Less provides more detailed and presentable error notifications.

Which preprocessor is better – Less or Sass – depends on your personal preferences. You can always try both to decide what suits best for your needs.

The Best CSS Preprocessors

Sass

Sass is one of the most well known CSS preprocessor. It exists for nearly eight years, and offers two syntaxes: the original Sass, and the SCSS, which is relatively new but already popular among web designers.

Sass

Less

Less is another popular solution that significantly extend the default CSS functionality by adding variables, mixins, and nested style rules. Less is  easy to setup and use – you just have to reference its JavaScript file in HTML document. Thanks to its simplicity, Less has attracted a huge community.

Less

CSS-Crush

CSS-Crush is not so popular as Less and Sass, but doesn’t make it less functional. This CSS preprocessor comes with all necessary features: inheritance, variables, nested rules. Keep in mind, that CSS-Crush makes use of PHP available, so you can run it virtually on any common server. And there is no need to fidget with Node.JS or other stuff.

CSS-Crush

Myth

In its turn, Myth is based on Node.JS. With this preprocessor, you will be able to use a future CSS syntax as soon as possible without having to worry about specification statuses or browser support. Thus, you have no need to rewrite the code, when the new syntax becomes available in a browser.

Myth

Stylus

This robust CSS preprocessor comes with a lot of custom features, such as saturation. It also allows you to omit semicolons, colons or braces. As a result, you get more readable code.

Stylus

DtCSS

DtCSS provides you with mixins, nested selectors and a smart caching system. This CSS preprocessor is based on PHP, so it can be run on most servers and platforms.

DtCSS

Rework

Rework is a tool for those developers, who wishes to launch a CSS preprocessor of their own. If Sass is too mainstream for you, and the syntax of Less is too bloated, you should look for Rework. Being a simpler solution, this CSS preprocessor provides you with the ability to write your own functions and preprocessing rules.

Rework

Clay

This CSS preprocessor is based on Haskell, so all its style rules and selectors are Haskell functions. Thus, Clay provides extra reusability and composability. This preprocessor supports media queries, nested style rules, and other features you might expect. Keep in mind, that in order to get Clay up and running, you will need a Haskell compiler.

Clay

Switch CSS

Switch CSS runs under Apache. It provides all the necessary features, but need amod_python to install and enable this CSS preprocessor. The tool is coded in Python.

Switch CSS

Compass

Compass is a CSS Authoring System, which provides the functionality of CSS preprocessor. The tool is based on Sass and includes all its features. With Compass, you will easily add mixins, variables and selector inheritance to your CSS. The tool is under active development.

Compass

CSS-On-Diet 

CSS-On-Diet is an easy and fast solution that works like Emmet. It is designed to short CSS keywords, modify and read COD files faster. This CSS preprocessor doesn’t require any programming skill to work with mixins, variables, media breakpoints and other features.

CSS-On-Diet

Prepros

This is an app that process Sass, Less, Scss, Jade, Stylus, Coffeescript, Markdown, and Haml. Prepros auto-compiles the source and then injects the CSS to the browser. Thus, no refresh is needed.

Prepros

Roole

This is another popular CSS preprocessor with features like loops, variables, conditions, nesting, functions, mixins, void, etc.