CSS 変数の使い方（かなりの初歩） #CSS

ページのテーマ色とかをいろんな要素で使いたい時に便利なCSS変数。
例えば、ページのテーマ色がオレンジだった場合、全ての箇所にオレンジと記載してもいいが、変更となった場合は全ての箇所を修正する必要が出てくる。
しかし、CSS変数を使うと１箇所直すだけで、その変数が割り当てられているところに反映される。

以下、サンプルコード


/*宣言方法は以下のように'--'で始める*/
/*使い方はvar()の()ないに入れ込む*/
h1{
  --my-color: orange;
  color: var(--my-color);
}
/*これでh1にオレンジが割り当てられる。
また、何も設定がないときの指定もできる*/

h1{
  color: var(--my-color,blue);
}

/*これは何も設定がされていなかったらblueを割り当てて、と言うこと*/

ただ、<h1>で宣言した変数を<p>では使えない。
つまり

h1{
  --my-color: orange;
  color: var(--my-color);
}

p{
  color: var(--my-color);
}

としても<p>にはオレンジが割り当てられない。
どうすれば共通して使えるかと言うと、
方法は２つある。

①共通の親要素で宣言する。
②文書全体のhtmlで宣言する。

①の場合は、htmlが以下のようになっていた場合、

<body>
  <h1>タイトル</h1>
  <p>本文</p>
</body>

共通する親要素である<body>で宣言すれば両方ともに共通する変数を使える。

body{
  --my-color: orange;
}

としておくと、<body>の中にある要素には、--my-colorが使える。

②の方法はCSSファイル内で

:root{
  --my-color: orange;
}

と言うように宣言すると、<body>,<h1>,<p>の全てというか、htmlにある全ての要素に--my-colorが使える。

また変数はプロパティの値に使えるのであって、プロパティ名には使えない
。
例えば、

--my-margin-top: margin-top;

はできず、

--my-margin-top: 40px;
margin-top: var(--my-margin-top);

こういう使い方をしなければならないということ。

以下、まとめサンプルコード


:root{
  --my-hue: 200;
}

body{
  background: hsl(var(--my-hue), 40%, 95%);
}

h1,p{
  color: hsl(var(--my-hue), 35%, 55%);
}

.btn{
  color: white;
  width: 100px;
  padding: 8px;
  border-radius: 4px;
  text-align: center;
  background: hsl(var(--my-hue), 50%, 50%);
  background: hsl(calc(var(--my-hue) + 180), 50%, 50%);
  /* 180°変えて補色の関係にし、見やすいように。 */
  background: hsl(calc(var(--my-hue) + 60), 50%, 50%);
  /* 完全に穂色はきついから、少しずらした色に */
}