DEV Community

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

Collapse
peerreynders profile image
peerreynders

As you can see there is no need for any CSS preprocessor like LESS or SASS,

This is akin to saying that in JavaScript const is obsolete because we can use let.

CSS custom properties are useful because they can be dynamically manipulated at runtime.

However there are many "design values" that are meant to be set at "design time" while being immutable at runtime. Those "design time constants" should ideally be handled by a pre-processor.

Collapse
zelig880 profile image
Mr_SC Author

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.