CSS :Root Variables and SASS Functions

CSS variables and SASS functions

Try this --gap-l: #{toRem(10)};, the #{} syntax is called interpolation. In the experience of heading bugs myself, when you want to use a SASS expression's raw value along with normal CSS, if you can't use the concise syntax like just toRem(10), try adding interpolation to see if it works.
Another example:

$padding: 5px;
.element {
  width: calc(100% - $padding); // will not work, it must be:
  width: calc(100% - #{$padding});
}

Here is the code with the updated question: https://jsfiddle.net/bcw763en/.
Notice that if you put :root above the @function, it'll not work.

My SASS variables into :root are not interpolated

You need to interpolate the variable like this --thm-font: #{$primaryTypography}; in the scope of :root.

Not sure the why of this behavior, but this answer was my way of finding this out.

Using SASS/SCSS to generate CSS variables

To give a general overview, the syntax #{…} is called interpolation and it is the only way to inject dynamic values into a CSS variable (custom property). Here is a quote from the doc:

CSS custom properties, also known as CSS variables, have an unusual declaration syntax: they allow almost any text at all in their declaration values. What’s more, those values are accessible to JavaScript, so any value might potentially be relevant to the user. This includes values that would normally be parsed as SassScript.

Because of this, Sass parses custom property declarations differently than other property declarations. All tokens, including those that look like SassScript, are passed through to CSS as-is. The only exception is interpolation, which is the only way to inject dynamic values into a custom property.

$primary: red;
:root {
  --primary: #{$primary}; // this one works
  --primary: $primary;    // this does not
}

The error you made is to put the -- inside the interpolation curly brackets ({}). This would work:

@mixin theme() {
  @each $theme, $map in $themes {
    @if $theme == "default" {
      :root {
        @each $key, $value in $map {
          --#{$key}: #{$value};
        }
      }
    } @else {
      [data-theme="#{$theme}"] {
        @each $key, $value in $map {
          --#{$key}: #{$value};
        }
      }
    }
  }
}

@include theme();

Difference between SCSS variables and CSS variables?

SCSS is a preprocessor. That means it is not CSS, but is converted into CSS at 'compile time'. In the resulting CSS code there is no resemblance to the original SCSS code. Hence you cannot change the variable values at CSS 'runtime'.

Historically SCSS is a fairly old technique. Actually it dates back to as far as 2007. It was invented by the motivation that CSS lacks certain features amongst which are variables (and nesting and loops and mixins etc.).

CSS variables are a quite recent addition to the CSS standard (The last call working draft seams to be from 2014). They didn't render SCSS variables useless, because you can do things to SCSS variables which you can't do with CSS variables (to my knowledge) like color calculations.

On the other hand you can do things with CSS variables that you can't do with SCSS variables like changing at runtime.

BTW: CSS variables are not the official jargon. They should be called custom properties. But everyone calls them variables.

Addendum 1

One difference I was not talking about. You can't change SCSS variables with JavaScript. CSS Custom Properties however can be accessed and changed with JS

Addendum 2

This article on CSS Tricks has a good overview: https://css-tricks.com/difference-between-types-of-css-variables/

---

Related Topics