A 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.
- SASS – uses the .sass file extension. SASS also has two syntaxes .sass and .scss.
- LESS – uses the .less file extension.
- STYLUS – uses the .styl 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.
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.
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 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.
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 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.
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.
COMPILERS TO USE FOR CSS FILES.