scssのmap機能で色指定するメリット・デメリット

実務で色指定をする際、SCSSのmap機能を使用しています。
SCSSのmap機能を使うと、keyとvalueのペアを定義できます。

定義しているscssファイルはこんな感じです。

styles/global/variable.scss

@use "sass:map";

/* Color */
$yellow: (
  "5": #fbf8ee,
  "10": #fff8e5,
  "20": #f3ebcf,
  "30": #e8d89f,
  "40": #d4c282,
  "50": #feec58,
  "60": #ffd746,
  "70": #ffd027,
);
$blue: (
  "5": #d5f3f3,
  "10": #afe7ff,
  "20": #537ca9,
  "30": #347692,
  "40": #0070a2,
  "50": #0071a3,
);
$white: (
  "100": #fff,
);
~

使用する場合は下記のように使用します。

button.module.scss

@use "sass:map"; // 必須

.button {
  color: map.get($white, '100');
  background-color: map.get($blue, '70');
}

ドキュメントは下記になります。

現状の色の指定を使い続けてみて、自身がメリットとデメリットに感じることを挙げてみました。

メリット

• 色の種類(黄色、青色など)ごとにどれくらいの種類のカラーコードを登録しているかが一目で分かる
• 登録していない色は指定できないので、デザインデータと整合性が取りやすい
• 一元管理しているので、色の変更があった際に変更しやすい

デメリット

• カラーコードをグラデーションごとにルールを決めて登録している場合、後から色を追加しづらい
• 毎回カラーコードを検索して調べる必要がある
• カラーコードが増えてくるとメンテナンスしづらい
• どの色がどこで使われているのか分からないので、デザインを統一しづらい(例えば背景色やボタンの色がページによってバラバラになるなど)

メリット・デメリットに関しては、現状のリポジトリがデザインの色の整備されきっていないこと、コンポーネントの共通化が完了いないこと、CSS Modulesを使用していることなど、他の要因も影響しています。

デメリットを改善するために進めること

• まずはデザインで使用されている色を見直し、整備する
  • 不必要に登録されている色がないか見直す
  • 色の役割と分類を見直し、例えばプライマリー、セカンダリー、背景色など、役割に応じた分類を行う
  • 現状では数字でカラーコードを登録しているだけにとどまっているので、どこでどの色を使用するのかを見直す
• スタイル名自体が目的を示すように、明示的な名前を作成してプロジェクト全体で一貫性を持たせる
  • 例: $primaryColor, $errorBackgroundColorのように明確な命名を行う
  • 例: $cardBoxShadow: 0 0.5rem 0.2rem -0.2rem map.get($gray, '50');など、よく使われるスタイルを変数化する

まとめ

色の指定には様々な方法があり、プロジェクトの規模や性質に応じて最適な手法を選択することが重要です。
デザイナーと開発者で、統一性と実用性を確保するために、定期的にデザインの整備を行うことが必要だと思いました。