CSSの変数(カスタムプロパティ)は、IEを除くすべてのブラウザでサポートされており、実際のプロジェクトで使用している人も増えてきたと思います。 CSSの変数は非常に便利で使いやすいのですが、期待通りに動作しないときの解決方法を紹介します。 The Big Gotcha With Custom Properties by Chris Coyier CSSの変数(カスタムプロパティ)の基礎知識、便利な使い方は以前の記事をご覧ください。 CSSの変数(カスタムプロパティ)便利な使い方を詳しく解説 CSS変数の優れた使い方、コンポーネントのバリエーションを実装するのに役立つ 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 CSSの変数(カスタムプロパティ)が期待通りに動作しない! 解決方法 1: 変数を使用する場所にスコープを設定する
![CSSの変数(カスタムプロパティ)が期待通りに動作しないときの解決方法](https://cdn-ak-scissors.b.st-hatena.com/image/square/bf5d161b0826d7a2ac61a63c58f04583c8ad2897/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-202103%2F2021082901.png)