carbon scss or css variables?

[OmranAbazid]

Hi,

What is the recommended way to handle carbon variables in a React app?
The docs only gives an example using the SCSS variables. Using this require importing the module of the variable.
Using the CSS variables directly seems to be easier as i can use the variable directly with the need to import it in every scss variable (e.g. margin-right: --cds-spacing-03 )

[janhassel]

I can't speak for the Carbon team but as a long time consumer, I would highly recommend using the Sass variables as they give you some advantages over the direct CSS custom properties:

1. Configuration

Aspects like the prefix can be configured globally. E.g.:

@use '@carbon/react/scss/config' with (
  $prefix: 'my-custom-prefix',
);

All Sass variables will automatically adapt to that.

2. Error handling

Sass will throw you a build error if for example $spacing-03 wouldn't exist. Using var(--cds-spacing-03) requires visual testing and can fail silently.

3. Fallbacks

At least for colors, the Sass variables include an appropriate fallback value in case the CSS custom property isn't set correctly. I think the spacing tokens currently don't do this but could probably be set up that way as well.

.my-component {
  /* color: $text-primary; */
  color: var(--cds-text-primary, #0f62fe);
}

[tay1orjones]

This is a great summation. The only thing I'll add is a reminder that @useing the necessary module in each file has no performance/size penalty because the sass module system ensures that module is only included once in the final css output.

The only "inconvenience" is having to add the @use line to the top of the file.