CSS (Cascading style sheet) is a collection of rules that target specific ID’s, classes, tags or attributes in the HTML and apply styles to them.
So, what in the world is a CSS pre-processor?
In a nutshell, it’s a scripting language that can be compiled into CSS.
So why would we use one?
Because it makes writing CSS easier, faster and more efficient.
The two most popular are SASS (syntactically awesome style sheets) and LESS (leaner style sheets) and they both work in a similar way.
Some new options are available to you that usually aren’t with vanilla CSS, things like the use of variables (for when you want to use the same value in multiple different places), mixins and functions (which are like little functions that you can send values to, which save you from repeating code).
There are also things like operators (which allow you to use mathematical symbols such as add, minus, divide, multiply and so on) and also extend which allows you to take an existing rule, and overwrite or add data within it, without changing the original rule.
A common problem when writing vanilla CSS is scoping your code to target only the elements you want to target. The more code you write the harder this becomes to manage and eventually you will get lost.
But with something like SASS or LESS, you can write your code within a structure that makes sense to you.
For example, let’s say I have a fairly basic page that has a few sections in it. If I wanted to change the colour of the H2 and the paragraphs in the second section, then make the image twice the size usually I would write some CSS like:
h2 {
color: #000000;
}
#sectionTwo h2 {
color: #FF0000;
}
#sectionTwo p {
color: #FF0000;
}
#sectionTwo img {
width:200%;
height: auto;
}If instead, I wrote in using SASS for example it might look more like this:
$red: "#FF0000";
h2 {
color: #000000;
}
sectionTwo {
h2 {
color: $red;
}
p {
color: $red;
}
img {
width:200%;
height: auto;
}
}Although the difference is subtle, it means that I can easily find where my root ID’s and classes are and then begin drilling down into that element’s children without struggling to find what I’m looking for.
In conclusion, it can feel a little weird trying one of these pre-processors out, but it can be very helpful and as you learn more about its features you will be able to do more, with less (or sass).
