Критическое изменение: Синтаксис переменных CSS

Более старые версии LibSass и Ruby Sass анализировали объявления настраиваемых свойств так же, как и любое другое объявление свойств, позволяя использовать в качестве значений полный диапазон выражений SassScript. Но это было несовместимо с CSS.

Совместимость:
Dart Sass
✓
LibSass
since 3.5.0
Ruby Sass
since 3.5.0

Спецификация CSS позволяет использовать почти любую строку символов в объявлении настраиваемого свойства. Несмотря на то, что эти значения могут не иметь смысла для какого-либо свойства CSS, к ним можно получить доступ из JavaScript. Когда они были проанализированы как значения SassScript, синтаксис, который был бы допустимым простым CSS, не удалось проанализировать. Например, библиотека полимеров использовала это для поддержки примесей простого CSS:

SCSS Syntax

:root {
  --flex-theme: {
    border: 1px solid var(--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 solid var(--theme-dark-blue);
    font-family: var(--theme-font-family);
    padding: var(--theme-wide-padding);
    background-color: var(--theme-light-blue);
  };
}

Чтобы обеспечить максимальную совместимость с простым CSS, более поздние версии Sass требуют, чтобы выражения SassScript в значениях пользовательских свойств были записаны в пределах интерполяции. Интерполяция также будет работать для старых версий Sass, поэтому рекомендуется для всех таблиц стилей.

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;
}

⚠️ Внимание!

Поскольку интерполяция удаляет кавычки из строк в кавычках, может потребоваться заключить их в функцию meta.inspect(), чтобы сохранить их кавычки.

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;
}