Take a look at this example:
@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";
  }
}
I want to make things as DRY as possible so I want to know if the following is possible, and if so how?
@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;
    }
  }
}
                Sass 3.3 (released on 2014/03/07) now allows you to use maps :
@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;
    }
  }
}
                        Sass does not currently support mappings. You'll have to live with lists of lists for now.
$icons: star "\2605", lightning "\26A1";
@each $icon in $icons {
  $key: nth($icon, 1);
  $value: nth($icon, 2);
  .icon-#{$key} {
    @extend .icon;
    &:after {
      content: $value;
    }
  }
}
                        If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With