CSSのカスタムプロパティの値にSassの変数を書くと、変数が値に置き換わらず、変数名のまま出力されます。原因と解決方法を説明します。
事象
カスタムプロパティの値にSassの変数$textPrimaryを渡します。
/* コンパイル前 */$textPrimary: #000;:root { --color-text-primary: $textPrimary;}コンパイルすると、#000にはならず、$textPrimaryのまま出力されます。
/* コンパイル後 */:root { --color-text-primary: $textPrimary;}原因
カスタムプロパティの値には、ほぼどんな文字でも書けます。JavaScriptから読み取って使うこともあるので、Sassの式に見える文字が、そのままの文字として必要な場合もあります。そのためSassは、カスタムプロパティの値を他のプロパティとは違う方法で解析し、変数や計算に見える部分も含めて、書かれたとおりにCSSへ出力します。
解決方法
Sassのインターポレーション#{}を使うことで回避できます。カスタムプロパティの値の中でSassの値を使う方法は、インターポレーションだけです。
/* コンパイル前 */$textPrimary: #000;:root { --color-text-primary: #{$textPrimary};}/* コンパイル後 */:root { --color-text-primary: #000;}注意
インターポレーションは、文字列の引用符を取り除きます。フォント名のように引用符を残したい値は、sass:metaモジュールのmeta.inspect()を通します。
@use "sass:meta";$font: "Noto Sans JP";:root { --font-1: #{$font}; /* Noto Sans JP（引用符が取れる） */ --font-2: #{meta.inspect($font)}; /* "Noto Sans JP" */}参考・引用
この記事は役に立ちましたか？