CSSカスタムプロパティを使ってみる

概要

• 同じデザインのボタンだけどキャンペーンごとに色を変更したい
• 更新・修正の手間を減らしたい
• CSSファイルで（！）
  という要件に対してCSSカスタムプロパティとCSSの@importを駆使して対応します

使う技法

CSSカスタムプロパティ

カスタムプロパティ記法(--hoge-color: red;)の形で定義し、var()の形式でアクセスが可能（個人的には「CSS変数」と呼ぶ方がイメージしやすいです😄）

:root {
  --hoge-color: red;
}
.hoge {
  color: var(--hoge-color);
}

@import

他のcssのパスを指定し読み込む

@import "hoge.css";

実践

① ボタンのベースを作成

.btn {
  color: #fff;
  background: #cc0000;
  display: block;
  width: 120px;
  padding: 15px 3px;
  border-radius: 6px;
}

---

② 文字色と背景色を変数化

:root {
  --txt-color: #fff;
  --bg-color: #cc0000;
}
.btn {
  color: var(--txt-color);
  background: var(--bg-color);
  display: block;
  width: 120px;
  padding: 15px 3px;
  border-radius: 6px;
}

---

③ btn部分を別シートに分割し、import

@import "parts.css";
:root {
  --txt-color: #fff;
  --bg-color: #cc0000;
}

(parts.css)

.btn {
  color: var(--txt-color);
  background: var(--bg-color);
  display: block;
  width: 120px;
  padding: 15px 3px;
  border-radius: 6px;
}

---

④ 「クリスマスの時期に使うcssファイル」「正月の時期に使うcssファイル」などキャンペーンごとにそれぞれファイルを用意して色を定義

xmas.css

@import "parts.css";
:root {
  --txt-color: #dc143c;
  --bg-color: #006400;
}

newyear.css

@import "parts.css";
:root {
  --txt-color: #fff;
  --bg-color: #ff4500;
}

これでキャンペーンごとに色を変えつつ、ボタンデザインの更新・修正をする場合はparts.cssファイルの更新のみで済む構成になります。

その他

• 変数名はグローバルなので名前が衝突しないよう注意が必要です
• 色だけではなくpxや文字列の値を定義することも可能です

CSSファイルで動的ぽく書けるようになってきたのは面白いですね👏
ではまた。