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年12月
1234567
891011121314
15161718192021
22232425262728
293031