An Introduction To LESS, And Comparison To Sass
What Are CSS Preprocessors?
The answer is in the name. If you understand how php or asp or any other server side programming language works it amounts to the same thing. In fact the first preprocessed css I encountered were css files ending in .php in order to use variables.
CSS preprocessors take code written in the preprocessed language and then convert that code into the same old css we’ve been writing for years. 3 of the more popular css preprocessors are Sass, LESS, and Stylus
Because they aren’t css, they aren’t bound by the limitations of css.The preprocessed language can give you more functionality than css as long as it eventually makes sure everything is output as css and works in a browser like we expect.
Why Use a CSS Preprocessor?
Because they aren’t css, they aren’t bound by the limitations of css. (Where have I heard that before?) It’s really as simple as that. CSS is great, but it doesn’t always let us do everything we’d like.
For example many developers want more abstraction than css gives us by default. One goal of css has been to keep it simple so anyone can quickly pick up the language and learn. However that focus also limits what css can do and developers don’t much like limitations. We want variables and if the language won’t gives it to us, we’ll find a way to give it to ourselves.
Preprocessors offer more than variables of course. They can offer whatever they want as long as the resulting css file they produce works as ordinary css.
You don’t have to use a preprocessor, but you’ll find most people who use them for any length of time will insist they’ll never go back. They won’t give up all the extras the preprocessor offers as those extras allow them to write more flexible and maintainable css quicker than they could without.
As it turns out, LESS — and Sass for that matter — are so much more than that. LESS and Sass share a lot of similarities in syntax, including the following:
- Mixins – Classes for classes.
- Parametric mixins – Classes to which you can pass parameters, like functions.
- Nested Rules – Classes within classes, which cut down on repetitive code.
- Operations – Math within CSS.
- Color functions – Edit your colors.
- Namespaces – Groups of styles that can be called by references.
- Scope – Make local changes to styles.