twolfson/json2css — pull request #24 by leevigraham (2014-03-21 07:10:18+00:00)
Title: [RFC] Added scssMap template for sass 3.3+

I quickly threw this scss template for sass 3.3+ together that takes advantage of the new sass maps. This still requires a bit more testing in production. What do you think is this something that could be added or even replace the existing scss template?

Example Output:

``` scss
@function sprite($sprite, $attribute) {
@return map-get(map-get($sprites, $sprite), $attribute),
}

$sprites: (
remove: (
x: 0px,
y: 0px,
offset_x: 0px,
offset_y: 0px,
width: 10px,
height: 11px,
total_width: 10px,
total_height: 233px,
image: 'icon-sprite.png'
),
remove_active: (
x: 0px,
y: 111px,
offset_x: 0px,
offset_y: -111px,
width: 10px,
height: 11px,
total_width: 10px,
total_height: 233px,
image: 'icon-sprite.png'
),
remove_hover: (
x: 0px,
y: 222px,
offset_x: 0px,
offset_y: -222px,
width: 10px,
height: 11px,
total_width: 10px,
total_height: 233px,
image: 'icon-sprite.png'
),
);

@mixin spriteWidth($sprite) {
width: sprite($sprite, 'width');
}

@mixin spriteHeight($sprite) {
width: sprite($sprite, 'height');
}

@mixin spriteHeight($sprite) {
height: sprite($sprite, 'height');
}

@mixin spritePosition($sprite) {
background-position: sprite($sprite, 'offset_x') sprite($sprite, 'offset_y');
}

@mixin spriteImage($sprite) {
background-image: url(sprite($sprite, 'image'));
}

@mixin sprite($sprite) {
@include spriteImage($sprite);
@include spritePosition($sprite);
@include spriteWidth($sprite);
@include spriteHeight($sprite);
}
```

Example Usage:

List all sprites as icons:

``` scss
@each $sprite, $attributes in $sprites {
.Icon--#{$sprite} {
@include sprite($sprite);
}
}
```

Create single sprite:
``` scss
.Icon--remove {
@include sprite('remove');
}
```