cssで変数を使う

LastModified
Category CSS

概要

CSS変数(カスタムプロパティ)の使い方

参考

https://developer.mozilla.org/ja/docs/Web/CSS/Using_CSS_custom_properties

基本

  • 変数は :root で定義をする
  • –変数名: 値; で変数の定義
  • var(–変数名) で変数の呼び出し
  • 大文字と小文字は区別される

COLOR

<span class="text01">COLOR</span>

:root {
    /* 変数を定義 */
    --color: blue;
}
.text01 {
    /* 変数を呼び出し */
    color: var(--color);
}

変数の初期値

  • var(–変数名,初期値) で定義されていない場合の値を設定

COLOR

<span class="text02">COLOR</span>

:root {
}
.text02 {
    /* 定義されていない変数の呼び出し */
    color: var(--undefined-color,red);
}

大文字と小文字の区別

  • 大文字で定義した変数と、小文字で定義した変数は、別の変数とみなされる

COLOR

<span class="text03">COLOR</span>

:root {
    /* 変数を定義 */
    --fontcolor: yellow;
    --FONTCOLOR: red; /* 使われない */
}
.text03 {
    /* 変数を呼び出し */
    color: var(--fontcolor);
    background-color: #333;
}

継承

  • 変数は子要素に継承される
    BBB の 子要素 EEE は #a0a0a0 になる。
  • 子要素で指定した変数はその子要素内で、新しい値を指定できる

AAA
BBB
CCC
DDD
EEE
FFF


<div class="colorbox aaa">
  AAA
  <div class="colorbox aaa-bbb">
    BBB
    <div class="colorbox aaa-bbb-ccc">
        CCC
    </div>
    <div class="colorbox aaa-bbb-ddd">
        DDD
    </div>
    <div class="colorbox aaa-bbb-eee">
        EEE
    </div>
  </div>
</div>
<div class="colorbox fff">
    FFF
</div>


:root {
    --bgc: #d9d9d9;
}

.colorbox{
    margin: 5px;
    padding: 10px;
    border: 1px solid #000;
    /* 変数 --bgc を呼び出す */
    background-color: var(--bgc);
}

.aaa-bbb{
    /* 新しい値を指定 */
    --bgc: #a0a0a0;
}
.aaa-bbb-ccc{
    --bgc: #6699f9;
}
.aaa-bbb-ddd{
    --bgc: #f96699;
}
.aaa-bbb-ddd{
    /* 何も指定しないので 親の値になる */
}
.fff{
    --bgc: #f99966;
}