Sassのマップで複数のカテゴリ情報を管理する

以前にSassでカテゴリーの色を管理するという記事を投稿しましたが、単一色の管理ではなく複数のカテゴリ情報を持たせたいということがあったので、設定と使用方法をメモ。

サンプルコード

Sasのマップを使ってカテゴリの情報を管理します。
その際、マップを入れ子にして複数の情報を管理できるようにします。

$categories: (
  'javascript': (
    color1: #58C9B9,
    color2: #9DC8C8
  ),
  'php': (
    color1: #F68657,
    color2: #F6B352
  ),
  'ruby': (
    color1: #9055A2,
    color2: #D499B9
  ),
  'python': (
    color1: #6AAFE6,
    color2: #CADBE9
  )
);

使用する際は@eachを使ってループを回して、入れ子のデータはmap-get()で取得します。

@each $key, $category in $categories {
  .category--#{$key} {
    color: map-get($category, color1);
    border-bottom: map-get($category, color2) 1px solid;
  }
}

これで意図した形でコンパイルできました。

.category--javascript {
  color: #58c9b9;
  border-bottom: 1px solid #9dc8c8;
}
.category--php {
  color: #f68657;
  border-bottom: 1px solid #f6b352;
}
.category--ruby {
  color: #9055a2;
  border-bottom: 1px solid #d499b9;
}
.category--python {
  color: #6aafe6;
  border-bottom: 1px solid #cadbe9;
}