はじめに
仕事でデザーナーが作成したfigmaのデザインから、ReactでUI実装をしていた時に
顧客からUIがある程度できた段階で、カラーパレットを用意したからデザイン全体の色を変えて欲しいという要望があった。
デザイナー側は、figmaの機能でカラーパレットを作っていたようで
設定を変えたら、紐付けしていた色を変えれるから即対応可能だと言っていた。
私は愚かにも全て各CSSファイルで色を記述していたため、プロジェクト全体で検索をかけて置換をしていた。
今回は上記方法でも問題なかったが
例えば、同じ色でも用途が違う場合(背景・線の色etc)があった場合に、別々の色に変更するときは
いちいち確認が必要になる。
上記のようなことがあったので、どこかで共通の宣言をして
各CSSファイルでそれを参照出来ないのかと調査をしたところ
CSSのvar関数を使用することで、実現が可能だったので方法を共有。
結果
今回の実装結果は以下
大本のカラーパレットを変更すると、設定を共有しているコンテナやテキストが変更されていることが確認できている
実装
CSS
共通元の設定
まずは他のファイル達で共通する、CSSの実装をしてみる
今回は背景を3種類、文字を3種類用意した。
:root {
--background-color: #ffc1f3;
--background-color-red: #ff0000;
--background-color-blue: #0000dd;
--text-color: #000000;
--text-color-green: #00ff33;
--text-color-yellow: #c3dd00;
}今回は:rootの中にカラーパレットを用意してみた。
:rootはどうやら、ルート要素を選択するとのこと。
ルート要素だから、全体で使えるのかなと思っている
:root は CSS の擬似クラスで、文書を表すツリーのルート要素を選択します。:root
基本的にはカスタムプロパティで作成することで、他のファイルからも使えるようになる模様。
カスタムプロパティはこれから利用するvar()関数で用いるための宣言として使えるとのこと。
接頭辞 — が付いたプロパティ名、例えば –example-name は、カスタムプロパティを表し、 var() 関数を用いて他の宣言の中で使用することができる値を持ちます。カスタムプロパティ (–*): CSS 変数
個々のCSSファイル
今回は6個のエリアと、6個のテキストを設定した。
@import url("./share/variable.css");
.main-container1 {
background-color: var(--background-color);
}
.main-container2 {
background-color: var(--background-color-red);
}
.main-container3 {
background-color: var(--background-color-blue);
}
.main-container4 {
background-color: var(--background-color-red);
}
.main-container5 {
background-color: var(--background-color-blue);
}
.main-container6 {
background-color: var(--background-color);
}
.text1 {
font-size: 2vw;
font-weight: bold;
color: var(--text-color);
}
.text2 {
font-size: 2vw;
font-weight: bold;
color: var(--text-color-green);
}
.text3 {
font-size: 2vw;
font-weight: bold;
color: var(--text-color-yellow);
}
.text4 {
font-size: 2vw;
font-weight: bold;
color: var(--text-color-green);
}
.text5 {
font-size: 2vw;
font-weight: bold;
color: var(--text-color-yellow);
}
.text6 {
font-size: 2vw;
font-weight: bold;
color: var(--text-color);
}まずはimportで使用する設定元のCSSをインポートしている。
@import url("./share/variable.css");
あとは以下のようにvar()関数を定義して引数に、カラーパレット無いで利用するカスタムプロパティを宣言するだけでよい。
background-color: var(--background-color);
ちなみにvar関数の詳細は以下を参考にした。
CSS の var() 関数は、他のプロパティの値の一部に代わってカスタムプロパティ (「CSS 変数」と呼ばれることもあります) の値を挿入できます。var()
最後に
今まで、デザイナーと同時進行で作ったことがなく
CSSの効率についてあまり考えたことがなかったがもう少しCSSを勉強したいと思った。
コメント