Coding is hard, and CSS should be easy, right?
Thereâs so much to learn and so much to practice every day, and when you just started learning the basics of web development, the easiest thing to do when it comes to front-end styling is writing plain and simple CSS.
The smack in the face happens when you stumble upon a project that uses a CSS preprocessor like SASS or LESS, and your world of certainty and confidence starts to crumble.
It can feel like a waste of time and energy setting up a preprocessor for the first time.
Your SASS file doesnât work out of the box like regular CSS, and in order to make it readable for the browser, you have to learn and set up something like Gulp or Webpack, which add another extra layer of complexity to your project you really wish you hadnât.
This is the very first roadblock, and probably the main reason why junior developers give up. Using a compiler is hard and convoluted, but, if you stop for a second and step back, this is actually a non-problem.
Just by doing a simple Google search, youâll be able to find plenty of prepackaged resources and solutions that you can add to your project folder in order to automatically deal with your SASS bundling. You donât actually need to understand Gulp or Webpack in order to use them. Plenty of ready to use solutions are available online, and the setup time is really minor.
Many of my students, and many of you guys watching my videos as well asked this same exact question when first encountering a CSS preprocessed file.
âWhy should I use SASS/LESS if I can have the same exact results in plain CSS, without the necessity of wasting my time in compiling and bundling my source code? Thatâs too much overhead!â
This is a legit question, and you shouldnât feel stupid or inadequate in asking it or thinking about it, everyone has this doubts sooner or later.
The short answer is âBecause itâs betterâ, but Iâm sure this answer wonât convince you at all, so, letâs dive a little bit deeper into the reasons why you should be using, or learning, a CSS preprocessor.
Writing less CSS code
After the initial struggle of figuring out how to integrate a compiler or bundler in your project, thereâs nothing much left to do other than writing way less code to achieve way better results.
With a CSS preprocessor, youâll have the ability to easily create reusable components, make your styling more modular, use mixing, foreach loops, dynamically import external resources, define variables, extend code portions, and so on.
Some of these things can be also done in regular CSS, but the amount of code that you end up writing is way less with a preprocessor.
Look at this code snippet for example:
In SASS, I can define some variables inside an array, and with a foreach loop, quickly generate a modular color component.
I can definitely do the same in CSS, but I have to manually write those variations one by one, and if in a later moment I decide to add or remove a variation, with SASS itâs just a matter of writing another variable, while in CSS, I have to duplicate the same snippet of code a lot of times.
Reusable CSS library
How many times you started a project and you wanted to reuse some CSS you wrote a while ago, but to make it work you had to painfully edit all those pixel values, color variations, and classes declarations, to adapt it for the new project?
With a preprocessor, you can have your starter toolkit relying on 1 single file that automatically adapts to a simple variable change.
This level of modularity and scalability cannot be achieved in regular CSS with the same elegance and speed used in a preprocessor.
Future proofing your code and your career
If you want to be taken seriously as a developer and have recruiter considering your portfolio, you need to demonstrate your ability to understand and adopt modern technologies and techniques.
Unfortunately, in our very particular field, is really hard to keep up and be always up to date considering a new framework gets released once every 3 months, but, nonetheless, you shouldnât be so out of the loop that you canât understand the benefits of a CSS preprocessor, or not even be able to implement it.
These preprocessors have been around since 2010, thereâs not a single excuse for you to not know how to use at least one of them.
And even if your projects are amazingly written and organized in plain CSS, chances are that youâre gonna stumble upon a project youâll have to maintain that was previously built with SASS or LESS, and thatâs gonna be painful.
So, in my opinion, these are the most obvious reasons why you should use a CSS Preprocessor. If you donât know what to do or how to do it, Iâm here to help you out.
Check out my Alecaddd Crash Course on SASS on my channel to boost your skills and start coding something amazing.