「CSSの変数を試してみる」のその（２）です。その（１）はこちらです。

webページを作成時に、繰り返し処理のスタイルを替えるケースでは、子要素はまったく同じにしておき親要素や祖先要素のclass名だけを変更して対応することがよくあります。しかし、要素やスタイルの数が多くなると、メンテナンスのときに全体の把握に手間取ります。そこで変数を使って、値に分かりやすい名称を付けておきます。

サンプルは、背景色と文字色を変数宣言しておき、「div class="box"」内のすべてのspan要素に適用しています。そして子要素のdiv全体を複製し、一方にclass名"type2"を追加して変数の値を書き換えています。

サンプル

htmlソース

<div class="box">
  <div>
    <ol>
      <li>サンプルテキスト・<span>ここの背景</span>に色を付ける・サンプルテキスト</li>
      <li>サンプルテキスト・サンプルテキスト・<span>ここの背景</span>に色を付ける・サンプルテキスト</li>	
      <li>サンプルテキスト・サンプルテキスト・サンプルテキスト・<span>ここの背景</span>に色を付ける・サンプルテキスト</li>
    </ol>
  </div>
  <div class="type2">
    <ol>
      <li>サンプルテキスト・<span>ここの背景</span>に色を付ける・サンプルテキスト</li>
      <li>サンプルテキスト・サンプルテキスト・<span>ここの背景</span>に色を付ける・サンプルテキスト</li>	
      <li>サンプルテキスト・サンプルテキスト・サンプルテキスト・<span>ここの背景</span>に色を付ける・サンプルテキスト</li>
    </ol>
  </div>
</div>

CSSソース

:root {
	--bg-color: #cfc;
	--txt-color: blue;
	}
.box span {
	background: var(--bg-color);
	color: var(--txt-color);
	}
.type2 span {
	--bg-color: #ccf;
	--txt-color: red;
	}