CSS Variables and SASS

/ Tessi

Both, SASS and CSS support variables, and of course they are not the same:

  • SASS variables get compiled into actual values into final CSS files.
  • CSS variables can be used as variables in the browser.

Today we had a fun debugging session while combining the two. We learned that you can’t put SASS variables into a CSS-variable just like that:

$my-sass-var = #C0FFEE;

:root {
  --my-css-var: $my-sass-var;
}

When compiling, it generates the exact input text in the compiled css file (we expected $my-sass-var to be replaced by the SASS compiler with #C0FFEE).Using SASS variables like this works almost everywhere, except when using CSS variables. It seems the SASS compiler thinks $my-sass-var is already proper CSS.

This issue appears beginning with node-sass 4.8.3, libsass 3.5.2. It used to work before these versions. It’s not mentioned in any release notes that this broke.

The solution is to wrap the variable in #{}:

:root {
  --my-css-var: #{$my-sass-var};
}

#{} triggers an explicit SASS interpolation, forcing the compiler to treat $my-sass-var as SASS code which needs compilation.

© 2020 bitcrowd GmbH.