「CSSの変数を試してみる」のその（３）です。その（１）はこちら、その（２）はこちらです。
CSS変数の値をJavaScriptのグローバル変数と同じように扱うためには、「:root」で定義します。ここで定義した値はbody全体に継承されます。また、同じ変数の値を局所的に変更することもできます。もちろんグローバルな値は変化しません。

サンプルは、「:root」で「--myColor: #26b」と定義し、span要素のcolorに適用、boxの子要素のspan要素（サンプルテキスト1）に反映しています。 さらに下の階層にもspan要素があり、それぞれの親要素で「--myColor」の値を再定義しています。そのためサンプルテキスト2、サンプルテキスト3の色が変わりますが、再定義した要素の外にあるサンプルテキスト4の色は変わりません。

サンプル

htmlソース

<div class="wrap">
	<div class="box">
		<span>サンプルテキスト1（boxの子要素span）</span>
		<div class="box2">
			<span>サンプルテキスト2（box2の子要素span）</span>	
			<div class="box3">
				<span>サンプルテキスト3（box3の子要素span）</span>	
			</div>
		</div>
	</div>
	<span>サンプルテキスト4（boxの外側のspan）</span>	
</div>

CSSソース

:root {
	--myColor: #26b;
	}
.box,.box2,.box3 {
	background: #fff;
	border: 4px solid #ddd;
	padding: 10px;
	}
.box {
	width: 700px;
	margin: 10px auto;
	}
.box2  {
	width: 500px;
	margin: 10px 0 0 10px;
	--myColor: red;
	}
.box3  {
	width: 300px;
	margin: 10px 0 0 10px;
	--myColor: green;
	}
span {
	color: var(--myColor);
	}