sass3.3からmaps（ハッシュ？key:valueの配列）が使えるようになって嬉しい、って話

疲れていることを理由にわざと金銭感覚を麻痺させるアトラエデザイナー、紺谷です。

背景色とか文字色とかボーダー色とか、単品で使えるclassをmixinで作ろうと思ってたんだけど、sass3.3より前だと配列は作れるんだけどkey:valueの配列が作れなかったので不便だなーと思ってた。

で、調べたら3.3以降は使えるって話。
早速使ってみた。

@import 'compass';

$colors: (red: #D50000, green: #00D56A, blue: #006AD5, yellow: #D5D500);
$properties: (bg: background-color, c: color, bdc: border-color);
$shade-variations: (shade-3: 60, shade-2: 40, shade-1: 25);
$tint-variations: (tint-1: 15, tint-2: 25, tint-3: 40, tint-4: 60, tint-5: 85);

@each $color-name, $color-value in $colors {
  @each $short-property-name, $property-name in $properties {
    @each $shade-name, $shade-percentage in $shade-variations {
      .#{$short-property-name}-#{$color-name}-#{$shade-name} {
        #{$property-name}: shade($color-value, $shade-percentage);
      }
    }
    .#{$short-property-name}-#{$color-name} {
      #{$property-name}: $color-value;
    }
    @each $tint-name, $tint-percentage in $tint-variations {
      .#{$short-property-name}-#{$color-name}-#{$tint-name} {
        #{$property-name}: tint($color-value, $tint-percentage);
      }
    }
  }
}

こうすることで4色×9パターン＝36色の背景色、文字色、ボーダーカラーが生成される。

基本色とshadeとtintのパーセンテージだけ調整するだけなので楽。

↓コンパイル後

.bg-red-shade-3 { background-color: #550000; }
.bg-red-shade-2 { background-color: #7f0000; }
.bg-red-shade-1 { background-color: #9f0000; }
.bg-red { background-color: #D50000; }
.bg-red-tint-1 { background-color: #db2626; }
.bg-red-tint-2 { background-color: #df3f3f; }
.bg-red-tint-3 { background-color: #e56666; }
.bg-red-tint-4 { background-color: #ee9999; }
.bg-red-tint-5 { background-color: #f8d8d8; }
.c-red-shade-3 { color: #550000; }
.c-red-shade-2 { color: #7f0000; }
.c-red-shade-1 { color: #9f0000; }
.c-red { color: #D50000; }
.c-red-tint-1 { color: #db2626; }
.c-red-tint-2 { color: #df3f3f; }
.c-red-tint-3 { color: #e56666; }
.c-red-tint-4 { color: #ee9999; }
.c-red-tint-5 { color: #f8d8d8; }
.bdc-red-shade-3 { border-color: #550000; }
.bdc-red-shade-2 { border-color: #7f0000; }
.bdc-red-shade-1 { border-color: #9f0000; }
.bdc-red { border-color: #D50000; }
.bdc-red-tint-1 { border-color: #db2626; }
.bdc-red-tint-2 { border-color: #df3f3f; }
.bdc-red-tint-3 { border-color: #e56666; }
.bdc-red-tint-4 { border-color: #ee9999; }
.bdc-red-tint-5 { border-color: #f8d8d8; }
.bg-green-shade-3 { background-color: #00552a; }
.bg-green-shade-2 { background-color: #007f3f; }
.bg-green-shade-1 { background-color: #009f4f; }
.bg-green { background-color: #00D56A; }
.bg-green-tint-1 { background-color: #26db80; }
.bg-green-tint-2 { background-color: #3fdf8f; }
.bg-green-tint-3 { background-color: #66e5a5; }
.bg-green-tint-4 { background-color: #99eec3; }
.bg-green-tint-5 { background-color: #d8f8e8; }
.c-green-shade-3 { color: #00552a; }
.c-green-shade-2 { color: #007f3f; }
.c-green-shade-1 { color: #009f4f; }
.c-green { color: #00D56A; }
.c-green-tint-1 { color: #26db80; }
.c-green-tint-2 { color: #3fdf8f; }
.c-green-tint-3 { color: #66e5a5; }
.c-green-tint-4 { color: #99eec3; }
.c-green-tint-5 { color: #d8f8e8; }
.bdc-green-shade-3 { border-color: #00552a; }
.bdc-green-shade-2 { border-color: #007f3f; }
.bdc-green-shade-1 { border-color: #009f4f; }
.bdc-green { border-color: #00D56A; }
.bdc-green-tint-1 { border-color: #26db80; }
.bdc-green-tint-2 { border-color: #3fdf8f; }
.bdc-green-tint-3 { border-color: #66e5a5; }
.bdc-green-tint-4 { border-color: #99eec3; }
.bdc-green-tint-5 { border-color: #d8f8e8; }
.bg-blue-shade-3 { background-color: #002a55; }
.bg-blue-shade-2 { background-color: #003f7f; }
.bg-blue-shade-1 { background-color: #004f9f; }
.bg-blue { background-color: #006AD5; }
.bg-blue-tint-1 { background-color: #2680db; }
.bg-blue-tint-2 { background-color: #3f8fdf; }
.bg-blue-tint-3 { background-color: #66a5e5; }
.bg-blue-tint-4 { background-color: #99c3ee; }
.bg-blue-tint-5 { background-color: #d8e8f8; }
.c-blue-shade-3 { color: #002a55; }
.c-blue-shade-2 { color: #003f7f; }
.c-blue-shade-1 { color: #004f9f; }
.c-blue { color: #006AD5; }
.c-blue-tint-1 { color: #2680db; }
.c-blue-tint-2 { color: #3f8fdf; }
.c-blue-tint-3 { color: #66a5e5; }
.c-blue-tint-4 { color: #99c3ee; }
.c-blue-tint-5 { color: #d8e8f8; }
.bdc-blue-shade-3 { border-color: #002a55; }
.bdc-blue-shade-2 { border-color: #003f7f; }
.bdc-blue-shade-1 { border-color: #004f9f; }
.bdc-blue { border-color: #006AD5; }
.bdc-blue-tint-1 { border-color: #2680db; }
.bdc-blue-tint-2 { border-color: #3f8fdf; }
.bdc-blue-tint-3 { border-color: #66a5e5; }
.bdc-blue-tint-4 { border-color: #99c3ee; }
.bdc-blue-tint-5 { border-color: #d8e8f8; }
.bg-yellow-shade-3 { background-color: #555500; }
.bg-yellow-shade-2 { background-color: #7f7f00; }
.bg-yellow-shade-1 { background-color: #9f9f00; }
.bg-yellow { background-color: #D5D500; }
.bg-yellow-tint-1 { background-color: #dbdb26; }
.bg-yellow-tint-2 { background-color: #dfdf3f; }
.bg-yellow-tint-3 { background-color: #e5e566; }
.bg-yellow-tint-4 { background-color: #eeee99; }
.bg-yellow-tint-5 { background-color: #f8f8d8; }
.c-yellow-shade-3 { color: #555500; }
.c-yellow-shade-2 { color: #7f7f00; }
.c-yellow-shade-1 { color: #9f9f00; }
.c-yellow { color: #D5D500; }
.c-yellow-tint-1 { color: #dbdb26; }
.c-yellow-tint-2 { color: #dfdf3f; }
.c-yellow-tint-3 { color: #e5e566; }
.c-yellow-tint-4 { color: #eeee99; }
.c-yellow-tint-5 { color: #f8f8d8; }
.bdc-yellow-shade-3 { border-color: #555500; }
.bdc-yellow-shade-2 { border-color: #7f7f00; }
.bdc-yellow-shade-1 { border-color: #9f9f00; }
.bdc-yellow { border-color: #D5D500; }
.bdc-yellow-tint-1 { border-color: #dbdb26; }
.bdc-yellow-tint-2 { border-color: #dfdf3f; }
.bdc-yellow-tint-3 { border-color: #e5e566; }
.bdc-yellow-tint-4 { border-color: #eeee99; }
.bdc-yellow-tint-5 { border-color: #f8f8d8; }

超便利。

みんなも使ってみてね。