DEV Community

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

Collapse
 
zelig880 profile image
Mr_SC

What I meant in that sentence, is that eh feature works with plain CSS, not that SCSS is useless! :)

Also what you said about "designs values" that need to be set at design time, but that also can nowadays be achieved with the use of CSS properties. 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.

Again, I love SASS and I personally use it all the time, the reasoning for me say that it was not needed, is to make sure that people are aware of what they CAN and CANNOT achieve with plain technologies :)

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.