| 1 |
// SCSS variables are information about icon's compiled state, stored under its original file name |
| 2 |
// |
| 3 |
// .icon-home { |
| 4 |
// width: $icon-home-width; |
| 5 |
// } |
| 6 |
// |
| 7 |
// The large array-like variables contain all information about a single icon |
| 8 |
// $icon-home: x y offset_x offset_y width height total_width total_height image_path; |
| 9 |
// |
| 10 |
// At the bottom of this section, we provide information about the spritesheet itself |
| 11 |
// $spritesheet: width height image $spritesheet-sprites; |
| 12 |
$spritesheet-width: 0px; |
| 13 |
$spritesheet-height: 0px; |
| 14 |
$spritesheet-image: '~@dist/images/sprite.png'; |
| 15 |
$spritesheet-sprites: (); |
| 16 |
$spritesheet: (0px, 0px, '~@dist/images/sprite.png', $spritesheet-sprites, ); |
| 17 |
|
| 18 |
// The provided mixins are intended to be used with the array-like variables |
| 19 |
// |
| 20 |
// .icon-home { |
| 21 |
// @include sprite-width($icon-home); |
| 22 |
// } |
| 23 |
// |
| 24 |
// .icon-email { |
| 25 |
// @include sprite($icon-email); |
| 26 |
// } |
| 27 |
// |
| 28 |
// Example usage in HTML: |
| 29 |
// |
| 30 |
// `display: block` sprite: |
| 31 |
// <div class="icon-home"></div> |
| 32 |
// |
| 33 |
// To change `display` (e.g. `display: inline-block;`), we suggest using a common CSS class: |
| 34 |
// |
| 35 |
// // CSS |
| 36 |
// .icon { |
| 37 |
// display: inline-block; |
| 38 |
// } |
| 39 |
// |
| 40 |
// // HTML |
| 41 |
// <i class="icon icon-home"></i> |
| 42 |
@mixin sprite-width($sprite) { |
| 43 |
width: nth($sprite, 5); |
| 44 |
} |
| 45 |
|
| 46 |
@mixin sprite-height($sprite) { |
| 47 |
height: nth($sprite, 6); |
| 48 |
} |
| 49 |
|
| 50 |
@mixin sprite-position($sprite) { |
| 51 |
$sprite-offset-x: nth($sprite, 3); |
| 52 |
$sprite-offset-y: nth($sprite, 4); |
| 53 |
background-position: $sprite-offset-x $sprite-offset-y; |
| 54 |
} |
| 55 |
|
| 56 |
@mixin sprite-image($sprite) { |
| 57 |
$sprite-image: nth($sprite, 9); |
| 58 |
background-image: url(#{$sprite-image}); |
| 59 |
} |
| 60 |
|
| 61 |
@mixin sprite($sprite) { |
| 62 |
@include sprite-image($sprite); |
| 63 |
@include sprite-position($sprite); |
| 64 |
@include sprite-width($sprite); |
| 65 |
@include sprite-height($sprite); |
| 66 |
} |
| 67 |
|
| 68 |
// The `sprites` mixin generates identical output to the CSS template |
| 69 |
// but can be overridden inside of SCSS |
| 70 |
// |
| 71 |
// @include sprites($spritesheet-sprites); |
| 72 |
@mixin sprites($sprites) { |
| 73 |
@each $sprite in $sprites { |
| 74 |
$sprite-name: nth($sprite, 10); |
| 75 |
.#{$sprite-name} { |
| 76 |
@include sprite($sprite); |
| 77 |
} |
| 78 |
} |
| 79 |
} |
| 80 |
|
