Enhance your front-end developer workflow with Sass and Less

Coders are often looking for ways to speed up the coding process, especially for CSS. Sass and Less are tools which make this possible. Let’s take a close look at how they work.

What are Sass and Less

Sass and Less are two CSS pre-processors which help to extend the CSS language. They primarily compile into vanilla CSS adding extra features which then allow for a wide range of other processes including variables, mixins, and functions. These can be used to speed up CSS front-end coding, design, and maintenance.

Benefits

What are the benefits of Sass and Less? Well, the benefits afforded by these CSS pre-processors are numerous.

Save time
When it comes to coding, any time-saving features are highly sought after. Sass and Less offer plenty which include:

  • Variables: set colors, sizes or attribute to fonts for instance. This is compiled in only one area and then can be used throughout the rest of the code.

Offer structured code
Both Sass and Less offer structured code options. This means the code is far easier to maintain because it is more organized, especially when using the coding features mentioned above. It also allows a coder to assign different elements of their coding project to partial files. When compiled, these do not get separated, but are then placed in the primary file.

Drawbacks

There are some drawbacks to both Sass and Less which are worth considering.

Debugging
Debugging is far harder due to the fact that an added compilation step means the browser no longer tries to interpret the source files. This makes CSS line numbers immaterial.

Tooling
Tooling extras such as CLI, GUI, and various plugins are needed when using Sass and Less.

Compile times
In some cases, compilation can be extremely time-consuming. This seems to vary greatly.

Performance
The generated CSS can sometimes be far larger than the source file. This can cause performance problems.

Although both Sass and Less do have some drawbacks, the pros far outweigh the cons for most programmers. The time saved coding alone is a reason enough to use these pre-processors.

This article was originally posted at danielboterhoven.tech.

Written by

PWA & Hybrid App Developer | Founder @ Denim.Dev — Greater Value / Less Code

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store