重要な変更: CSS 変数構文

以前のバージョンのLibSassとRuby Sassでは、カスタムプロパティ宣言を他のプロパティ宣言と同様に解析し、値としてSassScript式の全範囲を許可していました。しかし、これはCSSとの互換性がありませんでした。

互換性
Dart Sass
✓
LibSass
3.5.0以降
Ruby Sass
3.5.0以降

CSS仕様では、カスタムプロパティ宣言ではほぼ任意の文字列を使用できます。これらの値がCSSプロパティにとって意味のあるものでなくても、JavaScriptからアクセスできます。SassScript値として解析された場合、有効なプレーンCSSであった構文が解析できなくなります。たとえば、Polymerライブラリはこの機能を使用して、プレーンCSSミックスインをサポートしていました。

Playground

SCSS構文

: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出力

: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バージョンでも機能するため、すべてのスタイルシートで推奨されます。

Playground

SCSS構文

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

Sass構文

$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出力

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

⚠️ 注意！

補間は引用符で囲まれた文字列から引用符を削除するため、引用符を保持するにはmeta.inspect()関数でラップする必要がある場合があります。

Playground

SCSS構文

@use "sass:meta";

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

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

Sass構文

@use "sass:meta"

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

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

CSS出力

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