Prabin tamang

Content Management

CSS pre-processors, what are they?

prabin

CSS pre-processor is a program that lets you generate CSS from the pre-processor’s own unique syntax. A pre-processor basically takes our code that is written in the pre-processed language which then converts that into plain CSS. This can be done in many ways, which will be shown later on this article.

There are many types of CSS pre-processors, the main ones that are most commonly used on the web-development industry would be SASS, LESS and STYLUS. So, just like how we write .CSS file extension to name our CSS files, each of the pre-processor have their own unique file extension.

A CSS pre-processor allows us to use many different features that the native CSS doesn’t give us which makes our code that is written to be easily maintainable, much neater and easier to understand.

For the demonstration purposes the features are shown using the .scss syntax.

VARIABLES

Just like any programming language, on a pre-processor we can add variables to store our CSS values. This can help and benefit, us in many ways, storing a value on a variable allows us to change whatever the value is declared on the variable.

To declare a variable on .scss you use the $ symbol.

There are many ways you can use variables one way would be, for instance, if we wanted to change the value of the $primary-color variable to be a different color like blue, we can now change the value from red to blue to that variable. Now, If we want to use the color blue to style sections of our page we can now use that variable and assign it to our CSS color or background property.

The .box-1 class now has the background color of blue. This can be very useful, when working on a project and if you wanted to last-minute change your primary-color to something else, we can just change the value on the variable once and it affects globally to all the sections of the page that is using the $primary-color variable.

NESTING

Nesting is probably, one of the main reason a lot of people use a pre-processor rather than the normal CSS, because it allows our CSS code to be very structured and easy to follow and understand. Below, is an example of a nesting used on SCSS.

So, how nesting works is that whatever parent container you have you are able to nest all the child elements that are inside of that parent container.

In this case, you can see that the nav would be the parent container and inside the nav are all the nested elements which are the un-ordered list, list-item and the anchor tag which are all children elements of the nav container. Nesting can be used to style different sections of our page.

Another, example of nesting:

Here is a simple HTML page with 4 div’s , which all have class names box-1, box-2, box-3 and box-4. They also all have a paragraph tag and a span tag which are the children elements of all the div’s.

Now to write this on .scss, we simply declare the class of the div and inside the .box-1 class (which is a parent container) we can nest our paragraph and our span tag.

This is a very neat way of writing your CSS code and in my opinion, our code also becomes clear and very easy to understand.

MIXINS

This is just one example of how mixins can be used, they are functions that you can use to use your code many times without having to repeat yourself. They are also very similar to Javascript functions.

To define a mixin you use the @mixin  at-rule. The example above shows the mixin for the transform property. Since, some browsers do not support some of the CSS property each time we declare a property that is not supported by some browsers we would have to write the approriate vendor-prefix for that property.  

So, instead of writing each vendor- prefix everytime we declare a CSS property we can just store the property and the pre-fix to a mix-in. Now we are able to use the property without having to write the vendor-perfix again and again.

To apply the mixin we declare the @include at -rule.

EXTEND/INHERITANCE

Extend allows us to take all the attributes from a specific CSS class and use them in another CSS class.

On the example, above you can see the .foo class has a color of black and a border of 1 pixels solid black; The .bar class is uses the @extend rule to take all the attributes from the .foo class and applies it to the .bar class. So, now the .bar class also has a color of black and border of 1 pixels solid black. What its doing, is basically inheriting all the attributes and applying it to the .bar class.

Extend are similar to mixins, but the core main difference is that when you are using extend you can extend an actual CSS class. Meaning you can extend the functionality of a specific CSS class attributes. You can see on the example, that the .bar class is extending the functionality by adding a background color of red.

WHAT ARE THE DIFFERENCES BETWEEN ALL THE CSS PRE-PROCESSORS?

In fact, all CSS pre-processors have similar functionalities such as variables, mixins, extending, and nesting and more.

Here is the SCSS syntax, which I have been showing you so far .
Here is the SASS syntax, it’s basically the same as SCSS, but instead it relies on indentation. It also doesn’t use any curly braces or semicolons.
Here is the LESS syntax, so just like how we used $ sign to assign or variables on SCSS we instead use an @ symbol to declare the variable on LESS.
Stylus syntax is written like native CSS.

As you can see, All the pre-processors are very similar, and they all have the same functionalities. It’s a matter of preference, on how you want to write your code.

HOW DO WE COMPILE OUR PRE-PROCESSOR FILE TO A CSS FILE?

Well, there are many ways we can compile our pre-processor files.

One way would be to use NPM which is installed with node.js. if you go on, the relative CSS pre-processer website such as SASS. (I have given the relative links below) They give you the instructions on how we can install it through the command line.

However, there are easier ways to compile our pre-processor files, we can use applications like Prepros (windows, mac, linux) and Code-kit (mac OS). These applications let you complie sass, less, stylus  or any type of file into a single CSS file. They are also very easy to use.

Prepros, also gives us the option to add auto-prefix to our complied css file. Meaning, whenever we use a css property that some browsers don’t support, it automatically adds the vendor prefix for that property which I found very useful.

Overall, I have recently been using SCSS for my little projects, and I have been enjoying it a lot and now understand why it’s used mainly over the normal CSS. Hopefully, when the new CSS comes out it will also have the same features and many other new features added.

RELEVANT LINKS AND ARTICLES.

CSS Preprocessors – Sass vs LESS vs Stylus (With Examples)

https://sass-lang.com/guide

https://raygun.com/blog/css-preprocessors-examples/

http://lesscss.org/usage/

https://sass-lang.com/install

https://www.npmjs.com/package/stylus

https://webpack.js.org/loaders/sass-loader/

https://github.com/webpack-contrib/sass-loader

COMPILERS TO USE FOR CSS FILES.

https://codekitapp.com/

https://prepros.io/

Leave a Reply

Your email address will not be published. Required fields are marked *

Back to top