What are preprocessors?
CSS preprocessors have quickly gain enormous popularity and become popular tools to speed up and ease the work of Front End Developers. If you are not familiar with them, this article could help you get started.
So, what are preprocessors? At its most basic, a CSS preprocessor is a scripting language that extends regular CSS with functions, variables, nesting and many more. However browser cannot read any other CSS language than native, so additionally you need an application which compiles that scripted language into regular CSS syntax.
Benefits of using preprocessors
Many Front End Developers have started to use preprocessors because they offer much more than basic CSS. With preprocessors you can:
- reuse you code and set variables to assign values like colors, margins and get quicker access to them;
- nest selectors to get visual hierarchy like in HTML;
- do various things with conditions (if something > do something);
- modify colors like lighten/darken;
- do calculations like set width: 600px / 960px * 100%;
- split your code into multiple files without losing performance. For example, if you have many CSS files, each one sends request to HTTP server. And thats is painful. On the other hand, CSS preprocessors eliminates it, because they merge multiple files into a big one.
Preprocessors offer cleaner, more readable code, because they visually organizing structure of your code.
They solve cross-browser compatibility issues. When you write in preprocessor language it gets compiled into regular CSS and it adds all the information that is needed to make sure that your CSS code actually work across all browsers. No more typing prefixes like -moz or -webkit.
Preprocessors like LESS and Sass are fully backward compatible with CSS, which means regular CSS syntax is semantically valid in both of them.
When you start using them, there is no way back.
Disadvantages of using preprocessors
I only found three minor disadvantages of using preprocessors.
First, debugging could be harder as CSS line numbers are not always relevant to the source code.
Second, the compilation of code could take some time in really complex projects.
And third, you must have some time to spare to learn these new features which preprocessors offer.
However, it is worth it.
Comparison of preprocessors
Sass was originally written in Ruby in 2006. It gets many ports like LibSass written in C/C++ or node-sass written in JavaScript. The original syntax – called “the indented syntax” – uses an indendation to separate code blocks and newline characters to separate rules. The newer syntax – called “SCSS” – uses block formatting like regular CSS. It uses curly brackets to separate code blocks and semicolons to separate rules within a block. Nowadays it is a better choice to use newer SCSS syntax.
LESS also was originally written in Ruby, but in the later versions use of this language has been deprecated and replaced by JavaScript. It came out in 2009. LESS allows real-time compilation by including less.js in your HTML file without using any external tool. But I would recommend it only during development, because in production it could slow down the rendering of website.
Both of them have more or less similar functionalities. The syntax is basically the same, one major difference is defining variables, LESS uses @, while Sass uses $.
It is hard to decide which one is better and why. It is all about personal preference. But Sass seems to be the choice of most developers and it is gaining more popularity than LESS. For me the better choice is also Sass. It has more features and I feel more comfortable with its syntax.
However choosing LESS is not a bad option. Real-time compilation in browser in LESS is a good feature, but on the other hand in Sass we have got Gulp.js, which does the same job and many more.
Also Bootstrap in version 4.0 changed the preprocessor from LESS to Sass.
Generally both are huge timesavers. You type less and do more.
Afterword
Have you heard of Dart Sass? It is not ready yet, but it will be a totally new implementation of Sass. Faster, easier to install and easier to hack on. I am looking forward to it!
Our mission is to support startups in achieving success. Feel free to reach out with any inquiries, and visit our blog for additional tips. Tune in to our podcast to glean insights from successful startup CEOs navigating their ventures.