Stylus Objectでらくちんカラー管理したい

f:id:kikiki-kiki:20161130110134p:plain
StylusやSassなどでwebサイトのCSSを作成する時は、variableというようなファイルを作成して使用する色などを変数で書いておき適時使用しています。

しかし、色のバリエーションがある時に

$primary = #158cba
$primary-dark = #127ba3
$success = #28b62c
$success-dark = #28b62c

の様に全て変数で書いていくのは、なかなか面倒です。
そこで、値をオブジェクトにして簡単に色を取得できる方法を考えてみました。

stylus カラーパレットでの管理方法

// variable.styl
// カラーパレットをオブジェクトで作成
$color-palette = {
  default: {
    color:      #555,
    base:       #eee,
    border:     #e2e2e2,
    dark:       #d5d5d5,
    border_dk:  #c3c3c3,
    darker:     #C8C8C8,
    border_dkr: #c3c3c3 
  },
  primary: {
    color:      #fff,
    base:       #158cba,
    border:     #127ba3,
    dark:       #127ba3,
    border_dk:  #0c516c,
    darker:     #106a8c,
    border_dkr: #0c516c
  },
  // 略
}

使い方

ex: 色を返すだけのミックスイン

// Mixin: Return color
// @param: $type: color type
// @param: $tone: color's tone
get-color($type = "default", $tone = "base")
  return $color-palette[$type][$tone]

// How to use
.c-bg-primary
  background-color: get-color("primary")
.c-bg-primary-darker
  background-color: get-color("primary", "darker")

stylusはオブジェクトから値を取得するのに、javascriptと同じようにObject[val]の形式でも取得することが可能なので、darkやlightといったカラーバリエーションがあっても1つのミックスインに$typeと$toneを渡せば、トーンに合った色を簡単に取得することができました。

応用

ボタンなど色の出力のパターンが決まっているものは、ミックスインで出力するCSSのテンプレートを作ってしまえば簡単にバリエーションのCSSを作成することができます。

ex: ボタン

// Mixin: Button Variation
button-variant($type)
  color: $type.color
  background-color: $type.base
  border-color: $type.border
  &:hover
    color: $type.color
    background-color: $type.dark
    border-color: $type.border_dk
  &:active,
  &.is-active
    color: $type.color
    background-color: $type.darker
    border-color: $type.border_dkr
  &:disabled,
  &.is-disabled
    color: $type.color
    background-color: $type.base
    border-color: $type.border

// ボタンのカラーバリエーションのCSSを出力
for $key, $colors in $color-palette
  .c-btn-{$key}
    button-variant($colors)

ex: ラベル

// Mixin: Label Variation
label-variant($type, $tone = "base")
  color: $type.color
  background-color: $type[$tone]

// ラベルのバリエーションのCSSを出力
// Label Variation
for $key, $colors in $color-palette
  .c-label-{$key}
    label-variant($colors)

  // Darker Labels Style
  .c-label-{$key}-darker
    label-variant($colors, "darker")