CSS ファイル内の変数の宣言と使用法

CSS では、スタイルシート全体で特定の値を再利用する必要がよくあります。明示的な変数宣言構文はありませんが、この機能を実現する手法はあります。

1 つのアプローチは、CSS セレクターとスタイル ルールを利用することです。関連するスタイルを 1 つのルールに基づいて組み合わせることで、各スタイルの範囲を明確にしつつ、繰り返しを避けることができます。例:

/* Theme color: text */
H1, P, TABLE, UL {
  color: blue;
}

/* Theme color: emphasis */
B, I, STRONG, EM {
  color: #00006F;
}

この方法でスタイルを編成することで、繰り返しを防ぎ、どのドキュメント要素が影響を受けるかを明確にできます。

ただし、2 つのプロパティが同じ値を共有する場合でも、次の点に注意することが重要です。それらの意味は異なる場合があります。したがって、スタイルの繰り返しを検討するときは、現在の値よりも文脈上の意味を優先してください。このアプローチにより柔軟性が確保され、将来のスタイル更新時にエラーが発生するリスクが軽減されます。