Help us understand the problem. What is going on with this article?

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

More than 5 years have passed since last update.

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

背景色とか文字色とかボーダー色とか、単品で使える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; }

超便利。

みんなも使ってみてね。

masamitsu-konya
転職サイトGreenとTalentBaseのWebデザイナー&フロントエンドエンジニア。 バックエンドもマスターしたれぃ、と勉強中。
http://www.green-japan.com
atrae
People Techカンパニーとして、転職サイトGreen, ビジネスマッチングアプリyenta, 組織改善プラットフォームwevoxなどのサービスを運営。全ての社員が誇りを持てる組織と事業の創造にこだわり、関わる人々がファンとして応援したくなるような魅力ある会社であり続けることを目指しています。
https://atrae.co.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away