list と map の比較

list.scss

// SPRITE
//-----------------------------------------------------------------------------

// 変数のグローバル汚染が複数あり
// list の場合、可読性が低い（コメントが無いと、どの値が何に該当するかわからない）
// 並び順を変えると他に影響を及ぼす
$btn-type1: 49px, 49px, -4px, -4px, "type1";
$btn-type2: 49px, 49px, -61px, -4px, "type2";
$btn-type3: 49px, 49px, -4px, -61px, "type3";
//$btn-type4: 49px, 49px, -4px, -61px, "type4";
$btn-type5: 49px, 49px, -61px, -61px, "type5";
$btn-type6: 49px, 49px, -61px, -61px, "type6";
$btn-type7: 49px, 49px, -61px, -61px, "type7";
$btn-type8: 49px, 49px, -61px, -61px, "type8";
$btn-type9: 49px, 49px, -61px, -61px, "type9";

$btns: $btn-type1, $btn-type2, $btn-type3, $btn-type5, $btn-type6, $btn-type7, $btn-type8, $btn-type9;

// Extend: %sprite-btn
%sprite-btn {
  background-image: url(btn.png);
  background-repeat: no-repeat;
  background-size: 171px auto;
}

// MIXIN
//-----------------------------------------------------------------------------

// 可読性の低さを担保するための function と判断
@mixin sprite-width($sprite) {
  width: nth($sprite, 1);
}

// 可読性の低さを担保するための function と判断
@mixin sprite-height($sprite) {
  height: nth($sprite, 2);
}

@mixin sprite-position($sprite) {
  background-position: nth($sprite, 3) nth($sprite, 4);
}

@mixin sprite-crop($sprite) {
  overflow: hidden;

  @include sprite-width($sprite);
  @include sprite-height($sprite);
  @include sprite-position($sprite);
}

// TEST
//-----------------------------------------------------------------------------

// TEST1: ボタンの出力
.btn-test1-type01 {
  @extend %sprite-btn;
  @include sprite-crop($btn-type1);
}

// TEST2: すべてのボタンの出力
@for $i from 1 through length($btns) {
  $sprite: nth($btns, $i);
  $name: nth($sprite, 5);

  .btn-test2-#{$name} {
    @extend %sprite-btn;
    @include sprite-crop($sprite);
  }
}

// TEST3: type1, type3 のボタンのみ出力
@each $name in type1, type3 {
  @for $i from 1 through length($btns) {
    $sprite: nth($btns, $i);
    @if $name == nth($sprite, 5) {
      .btn-test3-#{$name} {
        @extend %sprite-btn;
        @include sprite-crop($sprite);
      }
    }
  }
}

// TEST4: 1-9 の繰り返し処理のうち、キーが存在していればボタンを出力
@for $i from 1 through 9 {
  $name: "type#{$i}";
  @for $i from 1 through length($btns) {
    $sprite: nth($btns, $i);
    @if $name == nth($sprite, 5) {
      .btn-test4-#{$name} {
        @extend %sprite-btn;
        @include sprite-crop($sprite);
      }
    }
  }
}

map.scss

// SPRITE
//-----------------------------------------------------------------------------

// 一つの map に入れることでグローバル汚染を避ける
// キーにより可読性があり、並び順が変わっても影響がない
$btns: (
  type1: (width: 49px, height: 49px, x: -4px, y: -4px),
  type2: (width: 49px, height: 49px, x: -61px, y: -4px),
  type3: (width: 49px, height: 49px, x: -4px, y: -61px),
  //type4: (width: 49px, height: 49px, x: -61px, y: -61px),
  type5: (width: 49px, height: 49px, x: -61px, y: -61px),
  type6: (width: 49px, height: 49px, x: -61px, y: -61px),
  type7: (width: 49px, height: 49px, x: -61px, y: -61px),
  type8: (width: 49px, height: 49px, x: -61px, y: -61px),
  type9: (width: 49px, height: 49px, x: -61px, y: -61px),
);

// Extend: %sprite-btn
%sprite-btn {
  background-image: url(btn.png);
  background-repeat: no-repeat;
  background-size: 171px auto;
}

// MIXIN
//-----------------------------------------------------------------------------

// map の場合、どれが width か分かるので function を用意する必要がない
//@mixin sprite-width($sprite) {
//  width: nth($sprite, 1);
//}

// map の場合、どれが height か分かるので function を用意する必要がない
//@mixin sprite-height($sprite) {
//  height: nth($sprite, 2);
//}

@mixin sprite-position($sprite) {
  background-position: map-get($sprite, "x") map-get($sprite, "y");
}

@mixin sprite-crop($sprite) {
  overflow: hidden;

  //@include sprite-width($sprite);
  //@include sprite-height($sprite);
  width: map-get($sprite, "width");
  height: map-get($sprite, "height");
  @include sprite-position($sprite);
}

// TEST
//-----------------------------------------------------------------------------

// TEST1: ボタンの出力
.btn-test1-type01 {
  @extend %sprite-btn;
  @include sprite-crop(map-get($btns, "type1"));
}

// TEST2: すべてのボタンの出力
@each $name, $sprite in $btns {
  .btn-test2-#{$name} {
    @extend %sprite-btn;
    @include sprite-crop($sprite);
  }
}

// TEST3: type1, type3 のボタンのみ出力
@each $name in type1, type3 {
  .btn-test3-#{$name} {
    @extend %sprite-btn;
    @include sprite-crop(map-get($btns, $name));
  }
}

// TEST4: 1-9 の繰り返し処理のうち、キーが存在していればボタンを出力
@for $i from 1 through 9 {
  $name: "type#{$i}";
  @if map-has-key($btns, $name) {
    .btn-test4-#{$name} {
      @extend %sprite-btn;
      @include sprite-crop(map-get($btns, $name));
    }
  }
}

output.css

.btn-test1-type01, .btn-test2-type1, .btn-test2-type2, .btn-test2-type3, .btn-test2-type5, .btn-test2-type6, .btn-test2-type7, .btn-test2-type8, .btn-test2-type9, .btn-test3-type1, .btn-test3-type3, .btn-test4-type1, .btn-test4-type2, .btn-test4-type3, .btn-test4-type5, .btn-test4-type6, .btn-test4-type7, .btn-test4-type8, .btn-test4-type9 {
  background-image: url(btn.png);
  background-repeat: no-repeat;
  background-size: 171px auto; }

.btn-test1-type01 {
  overflow: hidden;
  width: 49px;
  height: 49px;
  background-position: -4px -4px; }

.btn-test2-type1 {
  overflow: hidden;
  width: 49px;
  height: 49px;
  background-position: -4px -4px; }

.btn-test2-type2 {
  overflow: hidden;
  width: 49px;
  height: 49px;
  background-position: -61px -4px; }

.btn-test2-type3 {
  overflow: hidden;
  width: 49px;
  height: 49px;
  background-position: -4px -61px; }

.btn-test2-type5 {
  overflow: hidden;
  width: 49px;
  height: 49px;
  background-position: -61px -61px; }

.btn-test2-type6 {
  overflow: hidden;
  width: 49px;
  height: 49px;
  background-position: -61px -61px; }

.btn-test2-type7 {
  overflow: hidden;
  width: 49px;
  height: 49px;
  background-position: -61px -61px; }

.btn-test2-type8 {
  overflow: hidden;
  width: 49px;
  height: 49px;
  background-position: -61px -61px; }

.btn-test2-type9 {
  overflow: hidden;
  width: 49px;
  height: 49px;
  background-position: -61px -61px; }

.btn-test3-type1 {
  overflow: hidden;
  width: 49px;
  height: 49px;
  background-position: -4px -4px; }

.btn-test3-type3 {
  overflow: hidden;
  width: 49px;
  height: 49px;
  background-position: -4px -61px; }

.btn-test4-type1 {
  overflow: hidden;
  width: 49px;
  height: 49px;
  background-position: -4px -4px; }

.btn-test4-type2 {
  overflow: hidden;
  width: 49px;
  height: 49px;
  background-position: -61px -4px; }

.btn-test4-type3 {
  overflow: hidden;
  width: 49px;
  height: 49px;
  background-position: -4px -61px; }

.btn-test4-type5 {
  overflow: hidden;
  width: 49px;
  height: 49px;
  background-position: -61px -61px; }
  
.btn-test4-type6 {
  overflow: hidden;
  width: 49px;
  height: 49px;
  background-position: -61px -61px; }

.btn-test4-type7 {
  overflow: hidden;
  width: 49px;
  height: 49px;
  background-position: -61px -61px; }

.btn-test4-type8 {
  overflow: hidden;
  width: 49px;
  height: 49px;
  background-position: -61px -61px; }

.btn-test4-type9 {
  overflow: hidden;
  width: 49px;
  height: 49px;
  background-position: -61px -61px; }