Help us understand the problem. What is going on with this article?

Scssのcolor palette 管理についてのメモ

More than 5 years have passed since last update.

今までなんとなしに色管理とかカラーパレットは

$color-red : #fe0000;
$color-red-dark : #ce0000;
$color-blue : #000ef;
$color-blue-dark : #000ec;

てな具合で十分かなと思っていたけど最近はmapとかあるしその辺使った管理とかどうかなとか思ったらよさ気なのがあったのでまとめ。

mapを使ったいい感じのやり方

まず最終的なアウトプットから。

// パレットの定義
$color-palette :( 
  red : (
    base : #ff0000,
    dark : #ffcccc
  ),
  blue : (
    base : #0000ff,
    light : #00bbff,
  )
) !default;

// color(色系統, トーン)
@function color($color, $tone){
  @return map-get(map-get($color-palette, $color), $tone)
}

Sample usage

.red-button{
    background  : color(red);
}

.dark-blue-button{
    background  : color(blue, light);
}

関数名はまあなんでも良さげではあるけどcolor()とかpaletteとかがあるようだった。

こうすることでこれなにが利点なのか?

利点1:色ごとのセレクタ動的生成

というとmapなので繰り返しができること。

例えばstyleguide用に各色のサンプル出したいならこんな感じだし

// 一覧サンプル出力
@each $name, $palette in $color-palette {
  @each $tone, $code in $palette {
    .sample-color-palette-#{$name}-#{$tone}{
      background : color($name, $tone);
      .black-text{ color : #000 };
      .white-text{ color: #fff };
    }
  }
}

ボタンを特定の色で作りたかったらこんな感じとか

// redとblueのボタンを自動生成
@each $color in red, blue{
  .button-#{$color}{
    color: white;
    background : color($color);
  }
}

// 実際には色名をクラスには付けないのでこんな用途になりそう
$level-map :(
  error : red,
  warn : yellow,
  info : blue
);
@each $level, $color in $level-map{
  .log-#{$color}{
    color: white;
    background : color($color);
  }
}

利点2:色生成の隠蔽

今回paletteはmapで管理したけども、将来リファクタで整理されて、lighterなどの色関数を使えばよくね?みたいなことになった時に影響少なめで変更できそう(と思ったけどあんまりこれが活きるパターンはないな・・・)

欄外:なんでこんなことを思ったのか

そもそも実は

$color-map : (
    red : #ff0000,
    blue : #0000ff
);
@each $color, $code in $color-map{
    $color-#{$color} : #{$code}
    .sample-#{$color} :{
        background : $color-#{$color}
    }
}

のように動的にvariableを展開するようなのとかできないのかなーと思って調べていたら似たようなことをして詰まっている人を見つけた

https://github.com/sass/sass/issues/1450

このissueでも上記のようなやり方が紹介されていて、提唱者は問題なかったといっている。めでたしめでたし。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした