Sass variables vs. CSS custom properties

[alizedebray]

Sass variables and CSS custom properties are similar in that they are both reusable variables for writing styles. However, the main difference between the two is that Sass variables have static scope, which means their value cannot be changed once the styles are compiled, while CSS variables have dynamic scope: their value can be changed at runtime and all CSS properties using them are updated accordingly.

This discussion aims to make a decision on how we want to use CSS custom properties in the Design System style package in the future.

Before answering this survey, I strongly recommend that you read this article from Smashing Magazine which is very detailed and provides a good understanding of the difference between preprocessor variables and custom properties.

Advantages of CSS custom properties

Dynamical scope
Since CSS variables are dynamically scoped, you can style an element at runtime just based on a specific media query or selector without having to redeclare a bunch of properties.
This greatly reduces the amount of CSS code needed for the component.
More information...

Cascading behavior
By using CSS variables, an element can be styled differently based on its ancestors without having to explicitly declare the styles using nested selectors.
We currently use the functionality for colored backgrounds for example, it saves us from having to use a selector containing the list of all dark backgrounds in order to simply change the color of a text or a button.
More information...

JavaScript manipulation
By using element.style.setProperty('--x', value); you can update the value of a CSS variable through JavaScript.
Then all elements using that property are updated at once instead of having to redefine the style of each element individually.
More information...

Web components
Web components work with style isolation, but custom properties are still cascaded inside the shadow DOM.
This means that you can define CSS variables to enable styling of selected properties of the component from the outside!
More information...

When to use custom properties instead of Sass variable?

Depending on the use case we can work with a combination of Sass variables and custom properties.
If the property is subject to change at runtime, through a particular selector or media query for example, it is inherently dynamic and its value should be placed in a custom property.

Practical example for notifications (alerts and toasts):

• Using CSS custom properties:
  https://github.com/swisspost/design-system/pull/1350/files/a23c8392ccb4e4db6c15513f7e947ca652b109a0?file-filters%5B%5D=.scss&show-viewed-files=true
• Using Sass variables and mixins:
  https://github.com/swisspost/design-system/pull/1350/files?file-filters%5B%5D=.scss&show-viewed-files=true&show-deleted-files=false

Other interesting articles:

• https://css-tricks.com/difference-between-types-of-css-variables/
• https://www.smashingmagazine.com/2017/04/start-using-css-custom-properties/

[gfellerph]

I'm all for using custom properties, the difficulty is always where to draw the line. I believe this is one of the cases where only experience can tell what approach is best for our use case. My gut tells me that custom properties will not be used much for customizing the Design System. Variants are handled via classes or custom attributes on web components and changing specific styles will result in non-compliant design worst case.

For us however, they will (and already are) massively useful for theming (dark mode) and I did like the media query approach a lot. I'll vote for "Yes, but only on a few properties if needed" with the intention of saying "Yes, wherever they are useful for reducing complexity or delivering leaner code".

[gfellerph]

Before resolution: write up short guidelines to the contribution.md at the root.

[gfellerph]

Created a PR, closing the discussion (#1612)