CodePen Embed - using-image-sprites-with-scss

<h1>Using Sprite image with SCSS</h1>
<div>
  <span class="icon letter-dark-a"></span>
  <span class="icon letter-dark-b"></span>
  <span class="icon letter-dark-c"></span>
  <span class="icon letter-dark-z"></span>
  <br>

  <span class="icon letter-light-a"></span>
  <span class="icon letter-light-b"></span>
  <span class="icon letter-light-c"></span>
  <br>

  <span class="icon number-dark-0"></span>
  <span class="icon number-dark-1"></span>
  <span class="icon number-dark-2"></span>
  <span class="icon number-dark-3"></span>
  <span class="icon number-light-bang"></span>
  <br>

  <span class="icon number-light-0"></span>
  <span class="icon number-light-1"></span>
  <span class="icon number-light-2"></span>
  <span class="icon number-light-3"></span>
  <span class="icon number-light-bang"></span>
  <br>

  <span class="icon bubble-dollar"></span>
  <span class="icon bubble-question"></span>
  <span class="icon bubble-ellipsis"></span>
  <span class="icon bubble-check"></span>
  <span class="icon bubble-heart"></span>
  <br>

  <span class="icon button-a"></span>
  <span class="icon button-b"></span>
  <span class="icon button-start"></span>
  <span class="icon button-select"></span>
  <span class="icon button-up"></span>
  <span class="icon button-down"></span>
  <span class="icon button-left"></span>
  <span class="icon button-right"></span>
  <br><br>

  <div class="double">
    <span class="icon letter-dark-h"></span>
    <span class="icon letter-light-e"></span>
    <span class="icon letter-dark-l"></span>
    <span class="icon letter-light-l"></span>
    <span class="icon letter-dark-o"></span>
    &nbsp;
    <span class="icon letter-light-w"></span>
    <span class="icon letter-dark-o"></span>
    <span class="icon letter-light-r"></span>
    <span class="icon letter-dark-l"></span>
    <span class="icon letter-light-d"></span>
    <span class="icon number-dark-bang"></span>
  </div>
</div>

h1 {
  text-decoration: underline;
}

.icon {
  background: url("https://gist.github.com/assets/47686322/1d5e957d-45b3-4cc8-b9cb-d986b03c2e15");
  width: 16px;
  height: 16px;
  display: inline-block;
  position: relative;
  left: 0;
}

.double {
  & > .icon {
    scale: 2;
    image-rendering: pixelated;
    margin-right: 8px;
  }
}

$letters: a b c d e f g h i j k l m n o p q r s t u v w x y z;
$buttons: a b start start select select up down left right;
$numbers: 0 1 2 3 4 5 6 7 8 9 bang;
$bubbles: dollar question devil x ellipsis check bang heart;

@mixin icon-sprite($offset, $line, $width: 1) {
  $offset: $offset - $width;
  $line: $line - 1;

  background-position: 16px * -$offset 16px * -$line;
}

@for $i from 1 through length($letters) {
  $letter: nth($letters, $i);
  .letter-dark-#{$letter} {
    @include icon-sprite($i, 1);
  }
}

@for $i from 1 through length($letters) {
  $letter: nth($letters, $i);
  .letter-light-#{$letter} {
    @include icon-sprite($i, 2);
  }
}

@for $i from 1 through length($numbers) {
  $number: nth($numbers, $i);
  .number-dark-#{$number} {
    @include icon-sprite($i, 4);
  }
}

@for $i from 1 through length($numbers) {
  $number: nth($numbers, $i);
  .number-light-#{$number} {
    @include icon-sprite($i, 5);
  }
}

@for $i from 1 through length($bubbles) {
  $bubble: nth($bubbles, $i);
  .bubble-#{$bubble} {
    @include icon-sprite($i, 6);
  }
}

$button_end: length($buttons);
$button_start: 1;

@while $button_start <= $button_end {
  $button: nth($buttons, $button_start);
  $next: $button_start;

  .button-#{$button} {
    @if $button == "start" or $button == "select" {
      @include icon-sprite($button_start + 1, 3, 2);
      width: 32px;
      $next: $next + 2;
    } @else {
      @include icon-sprite($button_start, 3);
      $next: $next + 1;
    }
  }

  $button_start: $next;
}

View Compiled

This Pen is owned by mnngfl on CodePen.

See more by @mnngfl on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.