keyrune/sass/_setsymbol.scss

// _keyrune.scss

/** Set Symbol Base Class ========================
 */
.#{$keyrune_prefix} {
  display: inline-block;
  font: $keyrune_font;
  font-size: inherit;
  line-height: 1em;
  text-rendering: auto;
  transform: translate(0, 0);
  speak: none;
  text-transform: none;
  vertical-align: middle;
  // Better font rendering
  -webkit-font-smoothing: antialiased;
  -moz-font-smoothing: grayscale;

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

/** 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. Not really
 * | best practice (DRY, etc...) but fixes weird compilation.
 */
@each $set in $mtg_setlist {
  /* #{nth($set, 1)} */
  .#{$keyrune_prefix}.#{$keyrune_prefix}-#{nth($set, 2)}:before {
    content: "#{nth($set, 3)}";
  }
}