かもメモ

自分の落ちた落とし穴に何度も落ちる人のメモ帳

Sass カラーバリエーションをまるっと作りたい

新規のプロジェクトとか受託案件とかの初期段階でない限りプロジェクトで使うカラーバリエーションをまるっと作る機会ってなさそうだけど機械的にカラーバリエーションを作れる方法ができたから記録として。

カラーバリエーションを生成する

// デフォルトのカラーセット
$colors: (
  default: #A0AEC0,
  primary: #3182CE,
  success: #38A169,
  info:    #00B5D8,
  warning: #D69E2E,
  danger:  #E53E3E,
) !default;

@function light($color) {
  @return saturate(lighten($color, 13%), 15%);
}

@function dark($color) {
  @return saturate(darken($color, 13%), 7%);
}

// カラーバリエーションの map を返す
@function create_colors_map($color) {
  @return (
    default: $color,
    light: light($color),
    dark: dark($color),
  );
}

// $colors のキーにカラーバリエーションが割り当てられた map を作成
$ui-colors: ();
@each $color, $hex in $colors {
  $map: ($color: create_colors_map($hex));
  $ui-colors: map-merge($ui-colors, $map);
}

// $ui-colors からキーワードとバリエーションのカラーを返す関数
@function ui-color($key: default, $type: default) {
  $colorSet: map-get($ui-colors, $key);
  @if $colorSet == null {
    @return null;
  }
  
  @return map-get($colorSet, $type);
}

使い方

.bg-praimary {
  background-color: ui-color(primary); // => #3182CE
}

.bg-praimary--light {
  background-color: ui-color(primary, light); // => #58a3e9
}

.bg-praimary--dark {
  background-color: ui-color(primary, dark); // => #1e609f
}

// each でまるっとクラス定義
@each $key in map-keys($colors) {
  .bg-#{$key} {
    background-color: ui-color($key);
     &--light {
      background-color: ui-color($key, light);
    }
    &--dark {
      background-color: ui-color($key, dark);
    }
  }
}

₍ ᐢ. ̫ .ᐢ ₎ できた。

機械的に色を変更するならこのコードを使えば簡単にカラーバリエーションが作れそうです。
ただ元の色によっては同じ設定だと色味が明るすぎるとか暗すぎるとかになると思うので、丁寧にやるなら個別設定とか設定上書きするとかですかね〜

所管

Sass (SCSS) とか書くの1億年ぶり過ぎて map もループも変数の扱いも綺麗サッパリ忘れちゃってたね!ガハハ

Sass (SCSS) ちょとした実験にもコンパイルが必要だから毎度 Code pen とかに書いてたけど sassmeister ってオンラインでどうコンパイルされるか見れるツールがあるんですね! (debug が見れたら最高だったのだが… )


[参考]