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.
- 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:
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.
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 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.
SCSS Syntax
@use"sass:meta";
$font-family-monospace: Menlo, Consolas,"Courier New", monospace;
:root{
--font-family-monospace: #{meta.inspect($font-family-monospace)};
}
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;
}