CSS Variables - Sass to the rescue for fallbacks

CSS Variables and fallbacks are not elegant, as we just saw in the last video. Luckily, we can use Sass to help us out in this.

---

---

I'm on some other places on the internet too!

If you'd like a behind the scenes and previews of what's coming up on my YouTube channel, make sure to follow me on Instagram and Twitter.

[StanielBG]

Hello, since most of the websites are dropping support of Internet Explorer and most of the modern browsers support CSS variables. My question 2 years after is: Do we even need fallback for CSS variables anymore?

[codobyte]

Very nice tutorial!!! Thank you, Kevin.

[shayanfaghihi]

Do you have a complete Sass course or sequence videos I can learn? Thanks in advanced

[cheng]

Such an interesting example, well done!

[KitJohnson]

I don’t think you covered whether this will work when redefining a custom property for a particular element, such as you did with media queries in the previous video. For me that elegance is a large part of the attraction of using custom properties. My hunch is that it won’t work, and that this fallback solution works only for stuff that could be done with sass anyway, so will require using a separate variable rather than redefining an existing one. This doesn’t make it useless by any means, but I think it would’ve been good if you mentioned that. (Perhaps you did mention it but I missed it!) Fortunately browser support for custom properties is closer to 90% now.

[kamaboko]

Very interesting. Sort of a pain to set it up (e.g., a kick to the shin) but not a total nightmare (e.g., a kick to the groin). :-)

[marianazorzo]

Kevin, would you still recommend this fallback for a medium-size project nowadays, or it is not necessary anymore? Thank you!

[theProzacGeneration]

How would you implement opacity when using the mixin? Would I need to add additional variables with different opacities? Not sure about the syntax there.

[marcusantenor]

Hey Kev, I'm sure you will talk about that in your beyond Css course, which I can't wait to enroll to, but I'm still kind of confused about the fact that I used to set the font-size: 100% at the html level so that all the elements in rem could be resized. Now that we are setting font-size at the root level, do I still have to type font-size:100% at the html level? Even asking the question is kind of confusing, sorry, jj.

[MaxWeir]

Is it possible to create a mixin to convert SCSS variables into CSS Vars? Then output those for light and dark mode?

I'm trying to create light/dark mode .css files on the fly which only contain colour variables, the main site contains all the rest of the sites css:

light.css
dark.css
style.css

And have a way to switch between based on the users device preference, not a manual switcher. But only download/use the relevant css file and not request both.

[jordan]

Does writing the fallback this way also work -> color: # 030303, var (- text-color); ?

[seemsas]

Nice! It's not really complicated since you understood the concept. If you work with sass it would be a waste not to use those functions. If you implement this mixins from the beginning of your css coding and you do not need to refactor afterwards, it is not more work than using css variables that don't have the fallback. Thank you.

[DavidBailey_aka_Tigger]

Huh?!? Never used Sass... color me intrigued now, though! I am gonna go look at that next!

[overpl]

Great, but it's a scss version of sass. Would you mind recording genuine sass (not scss), please? Is it possible at all?

[codetheworld]

in 2024 do i need to use fall back for variables?...

[mattwood]

mine just prints out background: var(--variable);

[christianbelisle]

The trick doesn't work in sass but does in scss... bummer!

[facundocorradini]

Amazing work... but doesn't seem really practical at all. It's a lot of verbose to set CSS vars with fallbacks just to be able to manipulate some properties at runtime with javascript easier.... which will require a fallback on itself.
Besides it's applied to the boring part of CSS vars: using them pretty much as SASS ones would (such-property:such-value)
There's no fallback for the fun part, which redefining them with modifiers for a given DOM scope.