• ..

npm

    変数

    モダンな CSS ではあるセレクタ内に頭に--を付けた宣言を置くこで、そのセレクタ以下のスコープ(selector *)でvar関数を使ってその値を取得することができます。

    この機能はIEでは使用でないので注意が必要です。

    :root {
      --text-color: orange;
    }
    
    body {
      color: var(--text-color);
    }

    例えばこの CSS の場合、HTML が、

    <!DOCTYPE html>
    <html>
      <body>...</body>
    </html>

    として、こう解釈されます。

    body {
      color: orange;
    }

    :roothtmlと同じ意味です。:root *にはbodyが含まれるので、bodyセレクタではvarを使ってorangeという値を使うことができます。

    同じ変数定義が自分または親に2箇所以上存在する場合は、自分に一番近いものを使うことができます。つまり、

    :root {
      --text-color: orange;
    }
    
    body {
      --teext-color: blue;
    }
    
    body {
      color: var(--text-color);
    }

    の場合一番近いのは自分自身の--text-colorなので、

    body {
      color: blue;
    }

    となります。

    後に書いても良い

    気になったので調べてみましたが、必ず前に書かないといけないという訳ではないようです。

    body {
      color: var(--text-color);
    }
    
    :root {
      --text-color: orange;
    }

    これでも、ちゃんとオレンジ色になってくれました。