DEV Community

Discussion on: How to use variables in CSS with v-bind in VueJs 3

Collapse
peerreynders profile image
peerreynders

but that also can nowadays be achieved with the use of CSS properties.

Sure—but that still has a "we have let, what do we need const for" vibe to me.

I have worked in many projects that uses CSS properties in the way you are now explaining (set constant values), and I do not think the use of a pre-processor would be needed there either.

Ok—what if you're using SASS anyway—for source organization?

/* Somewhere in the "settings" layer (01) */
$black: #000000;
$white: #ffffff;

/* Somewhere in the "generic" layer (03) */
:root {
  --text-colour: #{$black};
  --bg-colour: #{$white};
}

@media (prefers-color-scheme: dark) {
  :root {
    --text-colour: #{$white};
    --bg-colour: #{$black};
  }
}
Enter fullscreen mode Exit fullscreen mode

(ITCSS)

In this particular scenario CSS custom properties are only employed where dynamic (i.e. late, run-time) behaviour is required (communicating intent) and the fundamental, global colours and measures are collectively assembled in one place outside of any CSS.

Dynamic values are often based on static ones (which are perhaps even generated) and this maintains a nice separation.