DEV Community

CSS Custom Properties (vars) with SASS/SCSS, a practical architecture strategy

Felippe Regazio on April 17, 2020

If you dont know about CSS Custom Properties yet, you really should learn about. I particularly prefer to use CSS custom properties instead of SASS...

Read full post

Aleksandr N. Ryzhov • May 28 '20

Hi, you say about prefix to avoid conflict => "and in the case of CSS Custom Properties, also add a prefix to avoid conflicts", point me please where and how it can happen ?

Thanks for article, very useful,
Alex

Felippe Regazio • May 28 '20

There are some cases:

If you have a very large codebase, you can use those prefixes as namespaces, to avoid name conflict on your own codebase.
If you load a CSS Lib that uses a variable name with same name as yours, that also would be a problem.
If your Styles will be used along a very large or distributed application, you dont know what kind of code already lives there, so better to use prefixes to keep everybody safe,

Aleksandr N. Ryzhov • May 29 '20

It's clear now,
Thanks a lot

geissht • Nov 8 '22

this is super super helpful, thank you Felippe!

Benjamin Intal • Jan 25 '21 • Edited

This is exactly what I'm trying to do. This is great to keep your styles DRY.
I've extended this further so that the fallback values would automatically be placed by the cssvar() mixin. Perhaps others may find this useful, here's my modification:

Add this at the top to hold all the styles:

$_cssvars: ();

Add this at the start of the cssvars() mixin to gather all the styles:

$_cssvars: map-merge( $_cssvars, $css_variables ) !global;

Then finally, change the output of the cssvar() mixin:

@return var(--#{$prefix}-#{$name}, map-get( $_cssvars, $name ) );

Afterwards the cssvar() mixin would automatically add the fallback value, you'll get this:

height: cssvar(btn-height, 40px);

Felippe Regazio • Jan 25 '21

holy shit thats awesome, thanks!

Emil • Apr 28 '21

That's exactly what I thought. Great article as well as good comment. Thanks both!

Trang Le • May 22 '21

Thank you. I like both SASS and CSS custom properties, and I'm glad to have found a good approach to use both. However, when importing config and helpers partials into the main stylesheet, can you get auto-correct for the cssvar function?

Felippe Regazio • May 24 '21

hey thanks Trang! ^^
sorry, but i didn't got, what do you mean with "auto-correct"?

Trang Le • May 25 '21 • Edited

I mean: cssvar() is a function to retrieve a CSS custom property.

Say you declare cssvar() in config/_helpers.scss.

Then you import the helpers module into your global stylesheet, e.g. global.scss.

Then you call cssvar():

body {
  color: cssvar(color-primary, ui); // Expected output: color: var(--ui-color-primary)
}

This would require me to remember what name I gave to my primary color variable, and what prefix I used, right? This means I'd need to go back to helpers module to check that. Otherwise, I may pass parameters that return non-existing CSS variables.

Do I make sense?

Felippe Regazio • May 25 '21

ah yah! that makes total sense. there are some ways to overcome this problem, i think my choice would be:

declare an outer scope sass var that defines a section/file css var prefix. that var can also be overrided, so in the header, main file or config file of any module that you want, you can set yoru prefix once, than all the cssvar functions will readit. this has some flaws also in a manner that you will have to pay attention in how to set your module $prefix in a cascade style.

would be something like:

Tom • Nov 19 '20 • Edited

In this line, I have brain-cracker:

$other-color: #0f0;
@debug opacify($other-color, 0.3); // #works

// but:
$primary-color: var(--v-primary-base);

.my-color {
color: $primary-color; // while this works
}

@debug opacify($primary-color, 0.3); // this fails with '$color: --v-primary-base is not a color.'

Felippe Regazio • May 24 '21

i think the problem is that sass is trying to reach a --v-primary color in a literal way, but --v-primary is not a sass var or value, so the sass function will try to literally act on a --v-primary notation, not its value.

a solution can be declare your css vars from a scss map, then you always have the values as css vars ou sass properties always when needing:

@use "sass:map";

$colors: (
    "primary-color": #fb7988,
    "secondary-color": #4ecdc4,
    "hover-color": #f1f1f1,
    "stripe-color": #f1f1f1,
);

:root {
    @each $color, $value in $colors {
        --#{$color}: #{$value};
    }
}

.op {
    opacity: opacify(map.get($colors, 'primary-color'), .3);
}