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; }

超便利。  
  
みんなも使ってみてね。