Breaking Change:CSS Variable Syntax

Older versions of LibSass and Ruby Sass parsed custom property declarations just like any other property declaration, allowing the full range ofSassScript expressions as values. But this wasn’t compatible with CSS.

Compatibility:
Dart Sass
✓
LibSass
since 3.5.0
Ruby Sass
since 3.5.0

TheCSS spec allows almost any string of characters to be used in a customproperty declaration. Even though these values might not be meaningful for anyCSS property, they could be accessed from JavaScript. When they were parsed asSassScript values, syntax that would have been valid plainCSS failed to parse.For example, thePolymer library used this to support plain-CSS mixins:

Sass Playground

SCSS Syntax

:root{
--flex-theme:{
border: 1px solidvar(--theme-dark-blue);
font-family:var(--theme-font-family);
padding:var(--theme-wide-padding);
background-color:var(--theme-light-blue);
};
}

CSS Output

:root{
--flex-theme:{
border: 1px solidvar(--theme-dark-blue);
font-family:var(--theme-font-family);
padding:var(--theme-wide-padding);
background-color:var(--theme-light-blue);
};
}

To provide maximum compatibility with plainCSS, more recent versions of Sassrequire SassScript expressions in custom property values to be written withininterpolation. Interpolation will also work forolder Sass versions, and so is recommended for all stylesheets.

Sass Playground

SCSS Syntax

$accent-color: #fbbc04;

:root{
//WRONG, will not work in recent Sass versions.
--accent-color-wrong:$accent-color;

//RIGHT, will work in all Sass versions.
--accent-color-right:#{$accent-color};
}
Sass Playground

Sass Syntax

$accent-color: #fbbc04

:root
//WRONG, will not work in recent Sass versions.
--accent-color-wrong:$accent-color

//RIGHT, will work in all Sass versions.
--accent-color-right:#{$accent-color}

CSS Output

:root{
--accent-color-wrong: $accent-color;
--accent-color-right: #fbbc04;
}

⚠️ Heads up!

Because interpolation removes quotation marks from quoted strings, it may benecessary to wrap them in themeta.inspect() function to preserve their quotes.

Sass Playground

SCSS Syntax

@use"sass:meta";

$font-family-monospace: Menlo, Consolas,"Courier New", monospace;

:root{
--font-family-monospace: #{meta.inspect($font-family-monospace)};
}
Sass Playground

Sass Syntax

@use "sass:meta"

$font-family-monospace: Menlo, Consolas, "Courier New", monospace

:root
--font-family-monospace: #{meta.inspect($font-family-monospace)}

CSS Output

:root{
--font-family-monospace: Menlo, Consolas,"Courier New", monospace;
}