Sassでカテゴリーの色を管理する

Sassの配列を使ってカテゴリーの色を管理する方法を試してみます。

サンプルコード

まずカテゴリーを管理する配列を指定します。

Sass

$members:(
  rin: #6f85aa,
  nadeshiko: #f8bdc6,
  saitou: #565157,
  aki: #7c7ca1,
  aoi: #c8ba9c
);

rinやnadeshikoがカテゴリー名、カテゴリー名の右のカラーコードがそのカテゴリーの色になります。

次にこの配列を使って、カテゴリーごとでCSSが異なる設定をしてみます。
今回は文字色と、カテゴリー名を使って背景画像を指定してみます。

Sass

@each $name, $color in $members {
  .character-#{$name} {
    color: $color;
    background-image: url(/assets/image/common/icon_#{$name}.png);
  }
}

コンパイルすると、以下のようになりました。

CSS

.character-rin {
  color: #6f85aa;
  background-image: url(/assets/image/common/icon_rin.png);
}

.character-nadeshiko {
  color: #f8bdc6;
  background-image: url(/assets/image/common/icon_nadeshiko.png);
}

.character-saitou {
  color: #565157;
  background-image: url(/assets/image/common/icon_saitou.png);
}

.character-aki {
  color: #7c7ca1;
  background-image: url(/assets/image/common/icon_aki.png);
}

.character-aoi {
  color: #c8ba9c;
  background-image: url(/assets/image/common/icon_aoi.png);
}

このように設定しておくと、カテゴリーの色指定がCSS内の複数箇所にある場合でも、配列にカテゴリーを追加するだけでよいので便利です。
　

【参考サイト】

• Sassで連想配列が使えるようになってたので使ってみた。 – Qiita