Drupal 9 Radix: Defining root css variables in scss

Here is a basic snippet showing how you can declare variables as root css variables  by using radix and bootstrap's default variables, found in the  _variables.scss file.

// Define browser variables and make them global accessible
:root {
  @each $color-name, $color in $colors {
    --#{$color-name}: #{$color};
  }
  @each $color-name, $gray in $grays {
    --gray-#{$color-name}: #{$gray};
  }
  @each $font-name, $font in $font-families {
     --#{$font-name}: #{$font};
   }
  @each $font-weight, $weight in $font-weights {
     --#{$font-weight}: #{$weight};
   }
}

This is handy in case you want to use global common scss variables in a custom module css file and you don't want to import everything else from scss.

For example :

.some-title {
  font-family: var(--font-primary);
  color: var(--primary);
  font-weight: var(--font-weight-light);
}