前提

きほんの定義

:root {
     --color-primary: #FF3300;
     --sp-l: 64px;
}

きほんの使用

a {
     color: var(--color-primary);
     margin-block: var(--sp-l) 0;
}

ヒラタ 1ヶ月前に更新

プラグイン

VS CODEのプラグインはCSS Var Completeがとりあえず良さそうだった

-- だけ入力すると色のプレビュー付きでサジェストされる。

ヒラタ 1ヶ月前に更新

色の透明度を変更したい場合は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);
}

ヒラタ 1ヶ月前に更新

ダークモードで自動で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);
}

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

ヒラタ 1ヶ月前

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

これはNG

:root {
    --pc: 960px;
}

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

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

@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 */
    }
}

ヒラタ 1ヶ月前

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

: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;
}

ヒラタ 1ヶ月前に更新

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

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

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

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

ヒラタ 1ヶ月前

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

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

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