CSSのショートハンドで記載する場合のカスタムプロパティの使用

Question

CSSでカスタムプロパティ「var()」を使って記載をしているのですが、CSSをショートハンドで記載をする場合は、カスタムプロパティで記載をするとエラーになってしまいす。

これは非対応なのでしょうか。（調べましたら具体的な記載が見つかりませんでした）

:root {
--button_color: #2B8EC5;
}

.ttl {
border: 1px solid var(--button-color);
}

上記で記載をするとボーターカラーがhtmlに反映されない

また、CSSショートハンドで毎回決まったカラーを指定したい場合にいい方法がありましたら伺えますでしょうか。

Answer 1

質問文では変数の定義が --button_color、変数の参照が --button-color と綴りが一致していません。変数名を合わせればショートハンドでもちゃんと使えました。

Comments

[tomato01]

初歩的なミスでした。。。お手数をおかけ致しました！ご回答をいただきありがとうございました！