CSS 003: Preprocessors

Throughout my time writing CSS for me elements, I’ve come across what are known as CSS Preprocessors. It’s basically scripting language that extends CSS and then compiles it into regular CSS. It helps you write maintainable code and reduce the amount of repeated CSS you have to write. There are many preprocessors out there, but the ones I’ve found to be very popular and commonly used are SASS and LESS.

Some advantages include:

  1. Cleaner code with reusable pieces and variables
  2. Saves time
  3. Easier to maintain code with snippets and libraries
  4. Calculations and logic
  5. More organized and easy to setup

Sass and Less are backwards compatible so you can easily convert .css files to either .scss or .less by renaming the extension of your file. Sass is also Ruby based, while Less is Javascript based, so you’ll need Ruby and Node installed respectively. You can find more information on Sass here and Less here.

Once you have either installed and up-and-running, let’s dive into the technicals. As mentioned above, you are able to get cleaner code by reusing code. For example, in CSS, you can declare the color of any element, but this becomes tedious if you want to apply this color to multiple elements, and if you introduce more colors, it becomes difficult to manage all these values.

With Sass/Less, you can assign these colors into variables. This will save you time having to remember what values you used for each color as they will have been declared.

You are also able to nest your CSS, resulting in a visual hierarchy, similar to how HTML is set up. This results in less repetition as well. You can easily see how your CSS will output is the style for a parent element and its children will be bundled up in the block of the parent attribute.

As you can see CSS preprocessors are very powerful and they can help streamline your development process.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.