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;
}
このエントリーをはてなブックマークに追加

関連記事

コメントを残す

メールアドレスが公開されることはありません。
* が付いている欄は必須項目です

CAPTCHA


コメントが承認されるまで時間がかかります。

2024年2月
 123
45678910
11121314151617
18192021222324
2526272829