CSSで変数が使えるとの事なので、使用してみます。

変数の定義

定義方法

変数名

変数名には先頭にハイフンを2つ付けます。

--basic-color: #f53838;

スコープ

変数を適用する範囲を決めます。:root 擬似クラスに変数を定義するとどこからでも参照出来ます。

:root {

}

定義例

:root {
  --basic-color: #f53838;
}

使用方法

var関数を使用します。

var(変数名)

使用例

HTML

<div class="container">
  <p class="text-A">あいうえお</p>
  <p class="text-B">かきくけこ</p> 
</div>
<p class="text-C">さしすせそ</p>

CSS

:root {
  --basic-color: #f53838;
}

.container {
  background-color: aqua;
  width: 150px;
}

.text-A {
  color: var(--basic-color);
}

.text-B {
  color: var(--basic-color);
}

.text-C {
  color: var(--basic-color);
}

結果

あいうえお

かきくけこ

さしすせそ

スコープ

変数の定義を :root 擬似クラスではなく、スコープの範囲を明確にしてみます。
スコープを containerクラスに限定しました。

HTML

<div class="container">
  <p class="text-A">あいうえお</p>
  <p class="text-B">かきくけこ</p> 
</div>
<p class="text-C">さしすせそ</p>

CSS

.container {
  background-color: aqua;
  width: 150px;
  --basic-color: #f53838;
}

.text-A {
  color: var(--basic-color);
}

.text-B {
  color: var(--basic-color);
}

.text-C {
  color: var(--basic-color);
}

結果

あいうえお

かきくけこ

さしすせそ

最後に

特にありません。