Sprites

Sprites are built through css-sprite and the build process generates:

• 2 sprites, one of which is a retina version
• a Sass file
• mixins + variables to use in sass found in /utils/sprites.scss

---

Sample Sass

All of the individual sprite assets are generated at the very top of the Sass file, followed by mixins.

$test: -2px -2px 15px 15px;

@mixin sprite-width($sprite) {
  width: nth($sprite, 3);
}

@mixin sprite-height($sprite) {
  height: nth($sprite, 4);
}

@mixin sprite-position($sprite) {
  $sprite-offset-x: nth($sprite, 1);
  $sprite-offset-y: nth($sprite, 2);
  background-position: $sprite-offset-x  $sprite-offset-y;
}

@mixin sprite($sprite) {
  @include sprite-position($sprite);
  background-repeat: no-repeat;
  overflow: hidden;
  display: block;
  @include sprite-width($sprite);
  @include sprite-height($sprite);
}

.sprite {
  background-image: url('assets/images/sprites/sprite.png');
}

@media (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (min-resolution: 1.5dppx) {
  .sprite {
    background-image: url('assets/images/sprites/sprite-x2.png');
    background-size: 20px 20px;
  }
}

Example Usage

.class:before {
  content: '';
  @extend .sprite;
  @include sprite($name);
}

.class:before {
  content: '';
  @extend .sprite;
  @include sprite($name);
  @include mq(large) {
    @include sprite($other-name);
  }
}

Please note that you must follow the following when using sprites:

• It must be a :pseudo element, either :before or :after will work.
• You must @extend the .sprite class. Please note that you can't use @extend in a media query, and thus it must be declared before.
• The @include sprite() mixin uses the predefined variables that are generated at the top of the Sass file.

---

Creating Sprite Assets

• All assets must be 2x the size. If your sprite asset is 50x50 pixels, you will need to make it 100x100 pixels so that correct retina assets are generated.
• All sprite assets must be saved to _src/sprites/
• All sprite assets must be PNG files
• In case of clipping, add 1-2px spacing around your asset.