Цикл значения объекта объекта SASS/SCSS

Взгляните на этот пример:

@include font-face('Entypo', font-files('entypo.woff'));

.icon {
  display: inline;
  font: 400 40px/40px Entypo;
}

.icon-star {
  @extend .icon;

  &:after {
    content: "\2605";
  }
}

.icon-lightning {
  @extend .icon;

  &:after {
    content: "\26A1";
  }
}

Я хочу сделать все как можно сухим, поэтому я хочу знать, возможно ли следующее, и если да, то как?

@include font-face('Entypo', font-files('entypo.woff'));

.icon {
  display: inline;
  font: 400 40px/40px Entypo;
}

$icons {
  $star: "\2605";
  $lightning: "\26A1";
}

@each $icon in $icons {
  $key = $icon{key}; // ???
  $value = $icon{value}; // ???

  .icon-#{$key} {
    @extend .icon;

    &:after {
      content: $value;
    }
  }
}

Ответ 1

В настоящее время Sass не поддерживает сопоставления. Теперь вам придется жить со списками списков.

$icons: star "\2605", lightning "\26A1";

@each $icon in $icons {
  $key: nth($icon, 1);
  $value: nth($icon, 2);

  .icon-#{$key} {
    @extend .icon;

    &:after {
      content: $value;
    }
  }
}

Ответ 2

Sass 3.3 (выпущен на 2014/03/07) теперь позволяет использовать карты:

@include font-face('Entypo', font-files('entypo.woff'));

.icon {
  display: inline;
  font: 400 40px/40px Entypo;
}

$icons: (
  star: "\2605",
  lightning: "\26A1"
);

@each $key, $value in $icons {
  .icon-#{$key} {
    @extend .icon;

    &:after {
      content: $value;
    }
  }
}