Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS CSS Variables vs. Preprocessor Variables

Javier Alvarado
Javier Alvarado
16,060 Points
Posted by Javier Alvarado
Javier Alvarado
16,060 Points

Are CSS preprocessors still useful?

CSS variables sound like a really good tool. From what I can gather, it also seems like CSS preprocessors aren't necessary anymore. I've never used them myself though, so I'm not too sure. Can someone help me figure this out? With CSS variables, is there still a need for CSS preprocessors?

1 Answer

Dane Parchment
MOD
Dane Parchment
Treehouse Moderator 11,075 Points
Dane Parchment
Dane Parchment
Treehouse Moderator 11,075 Points

What?! Where are you getting the idea they aren't used anymore? Almost all major CSS frameworks use them, and they make it easier to develop the front-end styles of your application. If you want to pursue a career in Front-End or Full-Stack Development, then learning a CSS Preprocessor is almost necessary in my opinion (I am a Full-Stack Software Engineer)

Javier Alvarado
Javier Alvarado
16,060 Points
Javier Alvarado
Javier Alvarado
16,060 Points

I understand that they are still being used in various places, and I figured that developers need to know them for codebases that were developed before CSS variables became widely supported. I was thinking more about if I was going to start a project from scratch, would I need to consider using a preprocessor to keep things organized or would I be able to do everything with pure CSS and CSS variables? From the video, it seems like CSS variables can do everything variables in preprocessors can do and more. But maybe there are other things that preprocessors can do that CSS can't that I'm unaware of (like I said, I've never used them myself before).

Javier Alvarado
Javier Alvarado
16,060 Points
Javier Alvarado
Javier Alvarado
16,060 Points

I'm kind of hoping that I can stick with pure CSS to keep things simpler, but if they are useful in different circumstances then I'll definitely start learning more about preprocessors.

Dane Parchment
Dane Parchment
Treehouse Moderator 11,075 Points
Dane Parchment
Dane Parchment
Treehouse Moderator 11,075 Points

To answer your question: It depends on the project. If it is a small project with simple html pages, then no using a preprocessor might be overkill. However, for most larger pages, single page applications (SPAs), or anything that will complex html pages and unified themes, you would be remiss to not use them. Yes, CSS variables let you implement the same thing as Preprocessor variables with native CSS but there is a problem. CSS Variables require browser support, a preprocessor doesn't because it always compiles down to native css. Also preprocessors come with more features:

  • Mixins
  • Functions
  • Better Nesting
  • Cleaner Syntax

AND you can still use CSS Variables with a pre-processor if you want since some preprocessors like SCSS for SASS allow native CSS!

Honestly, if you want to succeed in the development world, you will need to learn to never stagnate with a single language, or method of accomplishing tasks. Almost everyday something new changes our ecosystem and we need to learn how to adapt with it, or we get left behind. Not learning a CSS Preprocessor, will be the equivalent of an old model T Ford car trying to race against a Formula 1 car because it was easier to not have to learn how to drive the new car!

Hope that helps!