月: 2014年12月

Sassでmap型を使って連想配列ができると思ってたら、なんか思ってたのと違う。
フリーワードでkeyの宣言ができる連想配列っぽいことをしたい！って事で、
それっぽいように動くもののサンプルを作りました。

以下のサンプルは 色名と16進数を一つの変数に設定して、それを引数としてmixinをincludeすると
私が使い易い色に関するclassを用意してくれるというもの。Sass 3.4.7で動作確認です。

// color_set
@mixin color_set ($hash) {
	$length: length($hash);
	@for $i from 1 through $length {
		$Tmp: nth($hash, $i);
		$key: nth($Tmp, 1);
		$value: nth($Tmp, 2);
		@if $key and $value {
			.bg_#{$key} { background: #{$value}; }
			.color_#{$key} { color: #{$value}; }
		}
	}
}

// 使う色と宣言
$color: (
	(green, #419641),
	(blue, #428bca),
	(gray, #999),
	(white, #fff)
);
@include color_set($color);

出力される結果はこれ。

.bg_green {
  background: #419641;
}

.color_green {
  color: #419641;
}

.bg_blue {
  background: #428bca;
}

.color_blue {
  color: #428bca;
}

.bg_gray {
  background: #999999;
}

.color_gray {
  color: #999999;
}

.bg_white {
  background: white;
}

.color_white {
  color: white;
}