Is it convenient to use CSS preprocessors?

The appearance of the CSS language in 1996 meant an important improvement to the process of styling the HTML structure of a website. However, it is a very simple language that grants mostly static styles (they remain the same after loading the page), a limitation that is usually compensated through JavaScript. We have already talked about Styles, but there are other options, such as LESS, Sass and Compass. What are the advantages and disadvantages of these platforms?


Reusability. A convenience of programming languages ​​that CSS, by itself, does not offer. For example, if several classes will have the same color, we can store it in a variable, avoiding to write several times the same value in uncomfortable formats like RGB or hexadecimal.

Better syntax. Mixings are sets of properties that are grouped under the same name. For example, if we want two elements to have a red background, 5-pixel margin and yellow text, we can include these characteristics under the name “miMixin” and include this name in the declaration of both elements. Thus, we generate a more understandable and less repetitive code.

Dynamic features. For example, we can assign to the width of a block a dynamic value, expressed through an arithmetic operation that can include variables. In this way, the width will not have a fixed value in pixels or one relative to the dimensions of the screen, but will depend on the factor we want.


Complex code. The code already compiled itself can be repetitive, containing a lot of lines of code and adding a significant weight to the directory of our website.

Bad practices. Using a CSS meta-language without knowing the true language in depth can accustom inexperienced developers to rely on third-party tools.