Having learnt a lot about CCS right up until CSS3 I finally decided to install and give a CSS preprocessor a go. I decided to install and start learning SASS rather than the other popular alternative LESS. My decision for this was solely based on the @extend option that SASS provides and LESS doesn’t. It was the difference maker.
The actual syntax used is SCSS and it is then compiled and converted to CSS that the browser can understand. It makes styling a lot quicker and stops you from repeating yourself over time and time again. You can extend another class to use the properties from within that class but you can also add sole rules for the class you are currently styling.
The example below shows the SCSS code that is to be converted and you can easily see the @extend tag within the .seriousError class. This extends the .error class and allows that particular class to use the rules within the .error class and therefore means you do not have to copy and paste or retype out the code.
It allows easier changes as well later on. If I wanted to update the background colour in .error and wanted the changes to update in .seriousError they will using this @extend method whereas hard coding the rules using CSS would mean the rules would have to be altered manually again.
As you can see extra tags have been added next to the .error class now to show the extensions and to show that the classes want to also use the rules in the class its extending from.
SASS/SCSS allows you to be more productive when coding. If you are currently using CSS only then you should definitely try out a preprocessor like LESS or SASS. I’d recommend SASS and it is the option I have gone for myself but the numerous advantages they give over CSS means that it will be a worthwhile learning experience.