loading...

Do you prefer CSS vars or pre-processor vars?

jody profile image Jody Heavener ・1 min read

I'm putting together a new front-end and I'm trying to decide if I should rest on what I know and have used for years, SCSS variables, or if I should make the switch to native CSS variables.

On one hand: there's reasonable browser support for CSS variables these days, it's a lot cleaner when theming (e.g. dark mode), they're easy to target with JavaScript, and it just feels like I'm future-proofing my codebase to some extent.

On the other hand: I love the power of pre-processors. It's nice being able to throw a value into a color function to achieve a desired look, perform math with units of measurement, and iterate over mapped values.

What do you think? Do you have a go-to? Are there certain types of projects you would use one or the other for?

Posted on Apr 24 by:

jody profile

Jody Heavener

@jody

Trying to make good web things.

Discussion

markdown guide
 

Different use cases. Custom properties are runtime variables. Preprocessor variables resolve at compile time.
If You expect something to change, use custom properties. If they're static, use preprocessor variables.
Of course you can mix them. It's not a black or white issue.

 

If I need to change it, CSS variables. Otherwise, preprocessor variables.