DEV Community

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

bytrangle profile image
Trang Le

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?

felipperegazio profile image
Felippe Regazio Author

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

bytrangle profile image
Trang Le • 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)
Enter fullscreen mode Exit fullscreen mode

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?

Thread Thread
felipperegazio profile image
Felippe Regazio Author

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: