CSS Preprocessors…What is this now ?

Once I got a call from a recruiter, checking my eligibility for Front-End Engineer and she asked me — Do you know CSS Preprocessor ?

I was like….., what the hell is this now ❓❓❓🤷‍♀️

All this while in my head I had assumed, I comfortably know CSS. But, did I miss this ? Is it mandatory to know about it ? My self confidence dipped.😥

This is where my quest for knowing CSS Preprocessor started. 💡⚡🏇 The more I read, the more it turns out that I knew just tip of the iceberg. There is a whole world of interesting things still left to unfold in CSS, and Preprocessors was defintely one of them.

There were few questions I had asked myself in my quest for preprocessor. Sharing them here -

1. What is a CSS Preprocessor ?

Well obviously, you may Google to find the definition. One of them being -

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.

And this is how I understand it

CSS Preprocessor Overview

Below are few types of preprocessors -

Preprocessor Types

Which one shall I use ? 🤔

It totally depends on requirement and available knowledge in developers.

Below are articles summarizing pros and cons of popular types that you may refer -

Which is the best CSS preprocessor?

10 CSS Preprocessors Worth Considering

2. Who uses CSS Preprocessor ?

More than 3000 companies reportedly use Sass (one type of preprocessor) in their tech stacks, including Airbnb, StackShare, and Robinhood.

Why developers like Sass

3. Why Am I Supposed to know CSS Preprocessor ?

CSS preprocessors come in handy when we are developing large scale UI requiring heaving styling sheets.

Pros:

1. Create reusable code snippets that can be imported
2. Facilitates easier and efficient development
3. Makes code more organized, clean and helps avoid repetitions
4. Has Nested Syntax — Nesting of classes in CSS makes it easy to target DOM elements and saves you time. Nesting also makes it tremendously easy to edit CSS files.
5. Has special functionality of joining multiple stylesheets into one
6. Reduces number of errors and code bloat
7. CSS Preprocessor has many built-in functions Darken and Lighten e.g.functions
8. Ensures backward compatibility.

Cons:

1. Debugging is harder
2. Compilation slows down development
3. They can produce very large CSS files
4. Maintenance and over-engineering
5. Saving generated files (or not)
6. Capability and understanding
7. Knowledge available with developers

4. What are its built-in functionalities that can help me ?

There are many built-in functionalities available, but I’ll share a few that I found pretty interesting. I never knew you could do this via CSS !

1. @import — Helps include CSS snippets in other styling sheets
2. @extend — Enables sharing a set of CSS properties from one selector to another within same styling sheet
3. @mixin — Helps create CSS code that can be reused throughout the website.
4. Operators — Enables mathematical calcultions

Let’s dig into them with examples in Question 6.

5. How do I include it in my code ?

Here, I’ll be referring to SaSS preprocessor.

Pre-requisites :

1. Knowledge of CSS
2. Understanding of DOM structure

Setup :

1. Operating system — Platform independent
2. Browser support — works in Edge/IE (from IE 8), Firefox, Chrome, Safari, Opera
3. Installation — I am using node here for installing Sass on Windows machine.

i. Open command prompt by typing ‘cmd’ in the Run box

ii. Type below command to install Sass —

npm install -g sass

iii. After the installation is complete, you may confirm by checking the version installed

Setup is complete. ✌🏼 Same is depicted in this video here.

Read here for more details

4. Time for Magic ⭐🌟⭐

i. Preparing preprocessor file —

Here is a sample scss file. This needs to be saved with .scss extension in the project folder.

If you observe, very simple nesting is present here. The navigation elements are being styled here.

Next, we need to generate CSS file from this.

ii. Generating CSS file from Preprocessor —

Browsers do not understand Preprocessor. Therefore, the code needs to be converted to standard CSS. This process is called transpiling.

For e.g. sass files are stored as .sass. After transpiling, .css file gets generated from .sass file.

Traverse to your project folder and execute below command in your command prompt -

sass sample.scss sample.css

Tadaa ! We got our CSS file generated 🕺🏼

6. Any more interesting Features ?

Well, let me elaborate on few interesting features we discussed in Question 4.

1. @import

You can create small files with CSS snippets to include in other Sass files.

Example:

Below is a sample .scss file

reset.scss

Now, we will include the above set of styling in below file -

standard.scss

The resultant css file generated will look like this -

The css file includes both reset as well as standard file styling.

standard.css

2. @extend

Wish to share a set of CSS properties from one selector to another ? @extend may help here.

Here, is the resultant css file -

With help of @extend, the button-report class is including the styling of button-basic

3. @mixin

How about creating a code snippet and keep using it throughout the website ?

Let’s create a code-snippet for emphasized Text

Here, we are passing arguments for color and font size.

Re-use the above by including emphasized-text as shown below -

Next, we transpile and css file gets generated as shown below -

The imp class is having font-color and size as per the parameters passed to it.

4. Operations

You may include mathematical operations for properties.

.scss file

The resulting css file has the calculated value

7. Will it be fine if I am not aware of it ?

Well, no matter how many points I list down on pros and cons of CSS preprocessors, the best way to evaluate is by trying yourself and weighing if it is actually needed in your project and enabling you to solve the problem at hand smoothly.

I hope this write up in anyway made you familiar with CSS Preprocessors and ignited some curiosity to know about it more.

Looking forward to feedbacks (if any).

References :

Sass Tutorial

Advantages of CSS Preprocessors - Tech Blogs by TechAffinity

The disadvantages of CSS preprocessors | Adam Silver | Designer, London, UK.

Popular CSS Preprocessors With Examples: Sass, Less & Stylus

10 CSS Preprocessors Worth Considering

CSS Preprocessors Explained

Install Sass

Sass Basics