I was introduced to SASS, a CSS pre-processor language. I had heard about these CSS pre-processors before but didn’t pay much mind to them since I didn’t see the need. CSS is quite simple, why did people want to add levels of complexity to it? At least those were my thoughts until I went through the basics of SASS and saw its powers.
The first big PRO for using a pre-processor is using variables. All sites have at most 10 colors used throughout their style but re-using them consists of a huge copy and paste and making sure you grabbed the right HEX code. With SASS (and others), you could use variables that are defined once and then could be used throughout your style sheets. This was the first huge win, re-usability of definitions.
Second big PRO is including files ! Usually people have big comments on their CSS saying “this section takes care of tables”, now you can just include the file that takes care of the section and know where to look. It’s easier navigating through sub-sections in different files than sub-sections in a 1k+ line file. It reminded me of the first time I used include() in PHP, instead of copy and pasting HTML in my HTML files.
With these two, I was sold. But an honorable mention should go to using functions. With a function you can define specific code that you can re-use but have different variables implemented for it’s use. There are tons of other features but some go more on the CON side for me.
The biggest CON is what I knew from the start, complexity. One of the functionality it provides is looping. While looping is great when programming, looping and creating CSS in a loop could be dangerous because you will be significantly increasing your file size in the end. Then you have to remember to compile so all your CSS could be processed or you’ll be stuck with a previous version of it. Since these languages provide you with a lot of tools and options, it means more downfalls if used wrong.
As I go through some personal experiences, I hope to share some knowledge on do’s and don’t. CSS should be simple, clean and compact. With a language like SASS, things could get out of hand very easily.