spritesheet-templates/test/expected_files/stylus.styl

Convert spritesheet data into CSS or CSS pre-processor data

/*
Stylus 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;
*/
$sprite_dash_case_name = 'sprite-dash-case';
$sprite_dash_case_x = 0px;
$sprite_dash_case_y = 0px;
$sprite_dash_case_offset_x = 0px;
$sprite_dash_case_offset_y = 0px;
$sprite_dash_case_width = 10px;
$sprite_dash_case_height = 20px;
$sprite_dash_case_total_width = 80px;
$sprite_dash_case_total_height = 100px;
$sprite_dash_case_image = 'nested/dir/spritesheet.png';
$sprite_dash_case = 0px 0px 0px 0px 10px 20px 80px 100px 'nested/dir/spritesheet.png' 'sprite-dash-case';
$sprite_snake_case_name = 'sprite_snake_case';
$sprite_snake_case_x = 10px;
$sprite_snake_case_y = 20px;
$sprite_snake_case_offset_x = -10px;
$sprite_snake_case_offset_y = -20px;
$sprite_snake_case_width = 20px;
$sprite_snake_case_height = 30px;
$sprite_snake_case_total_width = 80px;
$sprite_snake_case_total_height = 100px;
$sprite_snake_case_image = 'nested/dir/spritesheet.png';
$sprite_snake_case = 10px 20px -10px -20px 20px 30px 80px 100px 'nested/dir/spritesheet.png' 'sprite_snake_case';
$sprite_camel_case_name = 'spriteCamelCase';
$sprite_camel_case_x = 30px;
$sprite_camel_case_y = 50px;
$sprite_camel_case_offset_x = -30px;
$sprite_camel_case_offset_y = -50px;
$sprite_camel_case_width = 50px;
$sprite_camel_case_height = 50px;
$sprite_camel_case_total_width = 80px;
$sprite_camel_case_total_height = 100px;
$sprite_camel_case_image = 'nested/dir/spritesheet.png';
$sprite_camel_case = 30px 50px -30px -50px 50px 50px 80px 100px 'nested/dir/spritesheet.png' 'spriteCamelCase';
$spritesheet_width = 80px;
$spritesheet_height = 100px;
$spritesheet_image = 'nested/dir/spritesheet.png';
$spritesheet_sprites = $sprite_dash_case $sprite_snake_case $sprite_camel_case;
$spritesheet = 80px 100px 'nested/dir/spritesheet.png' $spritesheet_sprites;

/*
The provided mixins are intended to be used with the array-like variables

.icon-home {
  spriteWidth($icon_home)
}

.icon-email {
  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>
*/
spriteWidth($sprite) {
  width: $sprite[4];
}

spriteHeight($sprite) {
  height: $sprite[5];
}

spritePosition($sprite) {
  background-position: $sprite[2] $sprite[3];
}

spriteImage($sprite) {
  background-image: url($sprite[8]);
}

sprite($sprite) {
  spriteImage($sprite)
  spritePosition($sprite)
  spriteWidth($sprite)
  spriteHeight($sprite)
}

/*
The `sprites` mixin generates identical output to the CSS template
  but can be overridden inside of Stylus

This must be run when you have at least 2 sprites.
  If run with a single sprite, then there will be reference errors.

sprites($spritesheet_sprites);
*/
sprites($sprites) {
  for $sprite in $sprites {
    $sprite_name = $sprite[9];
    .{$sprite_name} {
      sprite($sprite);
    }
  }
}