Zenn
Open8

生のCSS変数で値を管理するときのTips

CSS
ヒラタヒラタ

色の透明度を変更したい場合はrgbの定義もしておくと便利。

定義

:root {
    --color-primary: rgb(0, 128, 222);
    --rgb-primary: 0, 128, 222;
}

透明度100%で使う時

a {
     color: var(--color-primary); 
}

透明度50%で使う時

a {
     color: rgba(var(--rgb-primary),.5);
}
ヒラタヒラタ

ダークモードで自動でCSS変数の色が変わるようにする

定義

:root {
    --color-base: white;
    --color-main: black;
    @media (prefers-color-scheme: dark) {
        --color-base: gray;
        --color-main: #ffff;
    }
}

使用

body{
  background: var(--color-base);
  color: var(--color-main);
}

→ ユーザーのカラーモードに応じて色が変わる

ヒラタヒラタ

ブレイクポイントはCSS変数を利用できない

これはNG

:root {
    --pc: 960px;
}

body {
    /* Mobile */
    @media (width >= --pc) {
        /* Desktop */
    }
}

案1: PostCSSのプラグインで管理

https://www.npmjs.com/package/postcss-custom-media

@custom-media --pc (min-width: 960px);

body {
    /* Mobile */
    @media (--pc) {
        /* Desktop */
    }
}

ただし、冒頭の @media (width <= --pc) みたいな書き方はできない

案2: LESSやSCSSを使う

以下はLESSの例

@pc: 960px;

body {
    /* Mobile */
    @media (width >= @pc) {
        /* Desktop */
    }
}

案3: コンテナクエリを使う (まだ使えない・・・)

コンテナスタイルクエリが使えるようになると、以下のように親要素の変数定義に応じてCSSを変えられるようになります。将来的にはこれが良さそうですね。

:root {
  @media (960px <= width) {
    --pc: true;
  }
}

body {
    /* Mobile */
    @container style(--pc) {
        /* Desktop */
    }
}

https://caniuse.com/?search=container style queries

ヒラタヒラタ

メディアクエリごとに数値の大きさを変える

:root {
    --sp-l: 64px;
    --sp-m: 20px;
    --sp-s: 12px;
    @media (width < 480px) {
      --sp-l: 48px;
      --sp-m: 16px;
      --sp-s: 8px;
    }
}

h1 {
    margin-block: var(--sp-l) 0;
}
ヒラタヒラタ

要素ごとにCSS変数を上書きする

:root {
    --color-bg: white;
    --color-txt: black;
}

.card {
    background: var(--color-bg);
    color: var(--color-txt);
    &.caution {
        --color-txt: red;
    }
}

→ 普通の.card要素は白背景に黒文字だが、.cautionクラスもつけると赤文字になる

ヒラタヒラタ

CSS変数の定義にCSS変数を使う

グラデーションなどに便利

:root {
    --red: #f00;
    --blue: #00f;
    --gradation: linear-gradient(var(--blue), var(--red));
}