6 Reasons You Should Use a CSS Preprocessor

CSS preprocessors are scripting languages that extend the default capabilities of CSS. They enable us to use logic in our CSS code, such as variables, nesting, inheritance, mixins, functions, and mathematical operations. CSS preprocessors make it easy to automate repetitive tasks, reduce the number of errors and code bloat, create reusable code snippets, and ensure backward compatibility.

Each CSS preprocessor has its own syntax that they compile into regular CSS so that browsers can render it on the client side. Currently, the three most popular and stable CSS preprocessors are LESS, Sass, and Stylus, however there are many smaller ones as well. CSS preprocessors all do similar things but in a different way and with their own syntaxes. Each of them has some advanced features unique to them and their own ecosystem (tools, frameworks, libraries) as well.

Today is about LESS.

1. @variables

Variables make your code easier to maintain by giving you a way to control those values from a single location:

CSS @import makes another http request to fetch another stylesheet, while a Less @import grabs the content from inside your imported file and includes it within the compiled stylesheet. This means only one http request, allowing you to create partials and organize your css just that little bit better without any downsides!

A normal import will grab the contents of that file and dump it into the file asking for it. Super useful. Concatenating files is a vitally important feature of preprocessors.

/* Normal import */
@import "colors-or-whatever.less";

A (reference) import doesn’t do that. In fact, it doesn’t put anything at all into the file asking for it. The code in that file is just now ready to use, either by calling a mixin within it or extending a selector within it.

Mixins copy all of the properties into a selector, which can lead to unnecessary duplication. Therefore you can use extends instead of mixins to move the selector up to the properties you wish to use, which leads to less CSS being generated.

As an independent agency we are interested in viable solutions rather than trends; we work with leaders of the
industry for more than a decade and that’s for a reason: we deliver on time beautiful solutions that work.

Ready to start your next project? Drop us a line or stop by our office. We are open for creative
minds and collaborations!