DEV Community

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

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: