CSSカスタムプロパティのとりあえずのメモ

2020-10-19 16:36:02

CSSカスタムプロパティとは

基本的にはMDNに記載されますが要するにCSSに変数を定義して、関数で値を使えるようになる感じです。

:rootという擬似クラスを使用して、変数を設定します。
以下、サンプルです。

:root {
  --primaryColor: #4525F2;
  --primaryActiveColor: #4324EA;
  --primaryDisabledColor: #4324EA;
  --secondaryColor: #F2F4F8;
  --secondaryDisabledColor: #E9ECF2;
  --White: #FFF;
  --Black: #1C2126;
  --Gray: #8B8B8B;
}

変数名の付け方

変数名なのでなんでもいいんですが、わかりやすい方がいいので以下サイトを参考に自分でちょこちょこ変えてます

https://material.io/design/color/the-color-system.html#color-theme-creation

意味のあるものは`Active`とか`Disabled`とかの名前をつけてあげて、意味のないものは`300`とか`700`とかをつけてあげるのが良いかと。

変数名をつけた方が良い要素

色
font-family（複数様々な場所で指定する場合）
font-size
margin
padding
border

フォントサイズやマージンは数値を設定するだけなので、変数名の方が長くなってしまいあんま意味ないと思いがちです。

が、一番最初にメディアクエリを指定して画面サイズに応じて数値の設定をすると、どの画面サイズでもデザインとユーザービリティ両方を担保できるようになるので使い勝手がいいです。

以下見本です。

@media screen and (min-width:480px) {
  :root {
    --heading1Size: 24px;
    --heading2Size: 22px;
  }
}
@media screen and (min-width:768px) and ( max-width:1024px) {
  :root {
    --heading1Size: 28px;
    --heading2Size: 24px;
  }
}
@media screen and (min-width:1024px) {
  :root {
    --heading1Size: 36px;
    --heading2Size: 32px;
  }
}