keyrune/sass/components/_setsymbol.scss

// set symbol class
.#{$keyrune_prefix} {
  display: $setsymbol_display;
  font: $setsymbol_font;
  font-size: $setsymbol_font_size;
  line-height: $setsymbol_line_height;
  text-rendering: $setsymbol_text_rendering;
  transform: $setsymbol_transform;
  speak: $setsymbol_speak;
  text-transform: $setsymbol_text_transform;
  vertical-align: $setsymbol_vertical_align;
  // Better font rendering
  -webkit-font-smoothing: $setsymbol_webkit_font_smoothing;
  -moz-font-smoothing: $setsymbol_moz_font_smoothing;

  // default symbol if the set does not exist yet, or setcode does not match
  &:before {
    content: "#{$setsymbol_default_content}";
  }

  // set symbol size modifiers
  @each $size in $symbol_sizes {
    &.#{$keyrune_prefix}-#{nth($size, 1)} {
      font-size: #{nth($size, 2)};
    }
  }
}

// set symbol glyphs
// Originally, this was inside of the .#{$keyrune_prefix} class above,
// and used a '&' parent selector.
// However, the loop caused a strange
// interatction and printed all of the the set name comments above all
// of the set glyh classes; making a giant block of comments on top of
// a huge list of classes.
//
// Temporary solution for proper selector specificity was to prefix the
// class with the same variable as the main .ss class above.
@each $set in $mtg_setlist {
  /* #{nth($set, 1)} */
  .#{$keyrune_prefix}.#{$keyrune_prefix}-#{nth($set, 2)}:before {
    content: "#{nth($set, 3)}";
  }
}