CSS Preprocessors — What are they and why you should know about them.

In this article we will be looking specifically at SASS (A popular CSS Preprocessor) and exploring two powerful features that it provides with examples of how they can be used.

Why do I need to know about CSS Preprocessors?

• If you are interested in Front End Web Development and have been learning HTML and CSS, learning how to use a CSS Preprocessor is your next natural step. That is, before moving onto Javascript.
• You may be asked about CSS Preprocessors during an interview, for example, ‘What do you know about SASS?’ ‘Do you have any experience of using CSS Preprocessors?’ It’s good to know how to answer this type of question — I learnt this the hard way!

So what exactly is a CSS Preprocessor?

Put simply, a CSS Preprocessor is a program that lets you generate CSS from it’s own unique syntax. Preprocessors are used to extend CSS features. It gives CSS superpowers!

Why use a preprocessor like SASS?

With a preprocessor, you can make use of variables, operators, functions and other useful features that are not available when using just CSS on it’s own.

SASS (Syntactically Awesome Style Sheets) is one of the most commonly used preprocessors. Some other well known preprocessors are LESS, Stylus and PostCSS. Using SASS can be useful for large-scale web projects. It can:

• reduce code repetition, hence increasing your productivity;
• solve maintainability problems;
• help you write reusable codes in CSS;
• and finally help you to up-level your skills in Front End Development.

Common Uses

Now lets take a look at some common uses of SASS. We will explore two important features in detail and look at specific examples:

1. Variables
2. Mixins

1. Variables — the most commonly used feature in all programming languages is not available when using CSS. SASS allows you to define a value once and reuse it throughout your code.

SASS Variables can be declared and used throughout your code

CSS that would be compiled from the above SASS code

In the example above, three variables have been declared. Font size, primary colour and a secondary colour. These variables can be used instead of specifying the colours multiple times. One of the main advantages of using this approach is the ability to quickly and efficiently make changes if needed. For example, a client wants to change the colours of their website from red to pink. Instead of going through a large code base and changing the colour various times, you only need to change the colour variable once. This saves a lot of time and energy!

2. Mixins — are very similar to functions in other programming languages. A mixin takes in parameters and returns a specific value or values. What it essentially does is allows you to create reusable chunks of CSS, hence simplifying your code.

Mixin Example 1

In the example above, a mixin has been used to specify the colours of links used on a webpage. Instead of re-writing this code and specifying the links multiple times, you can declare the parameters and use @include to use it where ever you want. The CSS that this would produce is shown below:

Mixin Example 1

Lets take a look at another example:

Mixin Example 2

Here default values have been used to set the font style and then re-used for a header (h1 element). The CSS this would result in is shown below:

Mixin Example 2 — CSS

As with the use of variables, mixins can also reduce the need for code repetition and improve productivity. SASS includes a number of other powerful features. This article has given a brief introduction to what SASS is and how it can be useful. To find out more, you can access the documentation here.

If you have any questions or feedback about this article, please comment below.

Thanks for reading :-)