SCSSでカラーコードをパレット・トーン・ステートで管理できるMixinを作る

はじめに

以前、SCSSでカラーコードを管理する関数を作るの記事でカラーコードを管理する関数について紹介しましたが、要素の状態（hoverやcurrent）を定義するのに不便だったため、改良してパレット・トーン・ステートの3軸で管理できるMixinを作ってみました。

Mixin

Mixinはこんな感じ。前回と変わらずmap-getを使った簡単なMixinですが色を管理するための配列を第一引数で指定するように変更しました。

// Mixin to return the color code.
// 
// $palette_list - Array containing the palette.
// $palette_name - The name of the palette.
// $tone_name    - (option) The name of the tone.
// $state_name   - (option) The name of the state of tone.
// 
@function palette( $palette_list, $palette_name, $tone_name: 'base', $state_name: 'normal' ) {
  $error_color: #cc0000;
  $palette    : '';
  $torn       : '';
  $color      : ''; 

  @if map-has-key( $palette_list, $palette_name ) {
    $palette: map-get( $palette_list, $palette_name );
  } @else {
    @warn "Name in the palette : #{$palette_name} is not defined.";
    @return $error_color;
  }

  @if map-has-key( $palette, $tone_name ) {
    $torn: map-get( $palette, $tone_name );
  } @else {
    @warn "Tone in the palette : #{$tone_name} is not defined.";
    @return $error_color;
  }

  @if map-has-key( $torn, $state_name ) {

    $color: map-get( $torn, $state_name );
  } @else {
    @warn "Tone : #{$tone_name} to state : #{$state_name} is not defined.";
    @return $error_color;
  }

  @return $color;
}

カラーコードを管理する配列

カラーコードは連想配列で定義します。パレット（グループ）-> トーン -> ステート（状態）で指定します。トーンのデフォルトキーはbase、ステートのデフォルトキーがnormalです。これを指定しておけばMixinを呼ぶ際に省略が可能になります。

$palettes: (
  'typo': (
    'base': (
      'normal': #444
    ),
    'inverse': (
      'normal': #eee
    )
  ),
  'anchor': (
    'base': (
      'normal': #82baff,
      'hover' : #fff,
      'active': #fff
    ),
    'inverse': (
      'normal': #9ae7f0
    )
  ),
  'bg': (
    'base': (
      'normal': #242b33,
      'dark'  : #131519,
      'light' : #374251
    ),
    'inverse': (
      'normal' : #fafafa,
      'hover'  : #ccc,
      'current': #efefef
    )
  )
);

インラインでパレットを追加する方法

map-merge()を使って連想配列をマージすれば、パレットを追加できます。

$test: (
  'test': (
    'base': (
      'normal': #eeeeee
    )
  )
);

$palettes: map-merge($palettes, $test);

カラーパレットをjsonで管理する

試してはいませんがSass JSON Varsを使うことでjsonで定義したカラーパレットを使えます。

サンプル

配列のkeyを引数に指定するだけなので特に難しいことはないです。

@import "palettes";
@import "colors";

div {
  background: palette( $palettes, 'bg' );
  //background: #242b33;

  color: palette( $palettes, 'typo', 'inverse' );
  //color: #eee;
}

a:hover {
  color: palette( $palettes, 'anchor', 'base', 'hover' );
  //color: #fff;
}

使い回すことの多いカラーコードですが、1つ1つ変数に定義するのも面倒ですからこのようにできると少しは管理が楽になるかもしれませんね。

Gist

ちょこちょこ修正を加えるかもしれないので、Gistもどうぞ。

ではでは。