8dc9724a3e
gulpjs * new spritesmith plugin * reworked exports * new nunjucks-render version fixing dependency issues! File structure New naming scheme for nunjucks files. Underscore used for files which are imported and not directly displayed. Nunjucks blocks where renamed and are placed differently. New macro for navigational elements.
123 lines
3.2 KiB
SCSS
123 lines
3.2 KiB
SCSS
// SCSS variables are information about icon's compiled state, stored under its original file name
|
|
//
|
|
// .icon-home {
|
|
// width: $icon-home-width;
|
|
// }
|
|
//
|
|
// The large array-like variables contain all information about a single icon
|
|
// $icon-home: x y offset_x offset_y width height total_width total_height image_path;
|
|
//
|
|
// At the bottom of this section, we provide information about the spritesheet itself
|
|
// $spritesheet: width height image $spritesheet-sprites;
|
|
$down-name: 'down';
|
|
$down-x: 64px;
|
|
$down-y: 0px;
|
|
$down-offset-x: -64px;
|
|
$down-offset-y: 0px;
|
|
$down-width: 32px;
|
|
$down-height: 32px;
|
|
$down-total-width: 96px;
|
|
$down-total-height: 64px;
|
|
$down-image: '../art/sprite.png';
|
|
$down: (64px, 0px, -64px, 0px, 32px, 32px, 96px, 64px, '../art/sprite.png', 'down', );
|
|
$meta-name: 'meta';
|
|
$meta-x: 64px;
|
|
$meta-y: 32px;
|
|
$meta-offset-x: -64px;
|
|
$meta-offset-y: -32px;
|
|
$meta-width: 32px;
|
|
$meta-height: 32px;
|
|
$meta-total-width: 96px;
|
|
$meta-total-height: 64px;
|
|
$meta-image: '../art/sprite.png';
|
|
$meta: (64px, 32px, -64px, -32px, 32px, 32px, 96px, 64px, '../art/sprite.png', 'meta', );
|
|
$up-name: 'up';
|
|
$up-x: 0px;
|
|
$up-y: 0px;
|
|
$up-offset-x: 0px;
|
|
$up-offset-y: 0px;
|
|
$up-width: 32px;
|
|
$up-height: 64px;
|
|
$up-total-width: 96px;
|
|
$up-total-height: 64px;
|
|
$up-image: '../art/sprite.png';
|
|
$up: (0px, 0px, 0px, 0px, 32px, 64px, 96px, 64px, '../art/sprite.png', 'up', );
|
|
$up2-name: 'up2';
|
|
$up2-x: 32px;
|
|
$up2-y: 0px;
|
|
$up2-offset-x: -32px;
|
|
$up2-offset-y: 0px;
|
|
$up2-width: 32px;
|
|
$up2-height: 64px;
|
|
$up2-total-width: 96px;
|
|
$up2-total-height: 64px;
|
|
$up2-image: '../art/sprite.png';
|
|
$up2: (32px, 0px, -32px, 0px, 32px, 64px, 96px, 64px, '../art/sprite.png', 'up2', );
|
|
$spritesheet-width: 96px;
|
|
$spritesheet-height: 64px;
|
|
$spritesheet-image: '../art/sprite.png';
|
|
$spritesheet-sprites: ($down, $meta, $up, $up2, );
|
|
$spritesheet: (96px, 64px, '../art/sprite.png', $spritesheet-sprites, );
|
|
|
|
// The provided mixins are intended to be used with the array-like variables
|
|
//
|
|
// .icon-home {
|
|
// @include sprite-width($icon-home);
|
|
// }
|
|
//
|
|
// .icon-email {
|
|
// @include sprite($icon-email);
|
|
// }
|
|
//
|
|
// Example usage in HTML:
|
|
//
|
|
// `display: block` sprite:
|
|
// <div class="icon-home"></div>
|
|
//
|
|
// To change `display` (e.g. `display: inline-block;`), we suggest using a common CSS class:
|
|
//
|
|
// // CSS
|
|
// .icon {
|
|
// display: inline-block;
|
|
// }
|
|
//
|
|
// // HTML
|
|
// <i class="icon icon-home"></i>
|
|
@mixin sprite-width($sprite) {
|
|
width: nth($sprite, 5);
|
|
}
|
|
|
|
@mixin sprite-height($sprite) {
|
|
height: nth($sprite, 6);
|
|
}
|
|
|
|
@mixin sprite-position($sprite) {
|
|
$sprite-offset-x: nth($sprite, 3);
|
|
$sprite-offset-y: nth($sprite, 4);
|
|
background-position: $sprite-offset-x $sprite-offset-y;
|
|
}
|
|
|
|
@mixin sprite-image($sprite) {
|
|
$sprite-image: nth($sprite, 9);
|
|
background-image: url(#{$sprite-image});
|
|
}
|
|
|
|
@mixin sprite($sprite) {
|
|
@include sprite-image($sprite);
|
|
@include sprite-position($sprite);
|
|
@include sprite-width($sprite);
|
|
@include sprite-height($sprite);
|
|
}
|
|
|
|
// The `sprites` mixin generates identical output to the CSS template
|
|
// but can be overridden inside of SCSS
|
|
//
|
|
// @include sprites($spritesheet-sprites);
|
|
@mixin sprites($sprites) {
|
|
@each $sprite in $sprites {
|
|
$sprite-name: nth($sprite, 10);
|
|
.#{$sprite-name} {
|
|
@include sprite($sprite);
|
|
}
|
|
}
|
|
}
|