SCSS generated doesn't generate "concrete" sprite classes #44
Description
I could be wrong about this, but the SCSS that is output does not appear to include the actual class names for each of the generates sprites.
Using the follwing options (as part of a gulp stream):
.pipe(
cssSprite.stream({
name: 'sprite',
style: '_sprite.scss',
processor: 'scss',
cssPath: 'build/sprite/',
// "generate both retina and standard sprites. src images have to be in retina resolution"
retina: true,
orientation: 'binary-tree',
})
)
The following files do get generated correctly within 'build/sprite':
[email protected] sprite.png _sprite.scss
However, the contents of _sprite.sccs is as follows:
$main-logo: -2px -2px 200px 100px;
$js-logo: -2px -107px 200px 100px;
@mixin sprite-width($sprite) {
width: nth($sprite, 3);
}
@mixin sprite-height($sprite) {
height: nth($sprite, 4);
}
@function sprite-width($sprite) {
@return nth($sprite, 3);
}
@function sprite-height($sprite) {
@return 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);
}
.icon {
background-image: url('app-build/sprite/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) {
.icon {
background-image: url('app-build/sprite/[email protected]');
background-size: 410px 210px;
}
}
It appears that the required mixins and functions are all in place, however the onlty "instantiated" or "concrete" CSS classes generated are:
.icon, and@media ... .icon
The dimension variables that were defined right up the top, $main-logo and $js-logo have not been used in any of the mixins or functions to generate actual classes.
In the usage section for SCSS, we have the instrucrtions:
@import 'sprite'; // the generated style file (sprite.scss)
// camera icon (camera.png in src directory)
.icon-camera {
@include sprite($camera);
}
// cart icon (cart.png in src directory)
.icon-cart {
@include sprite($cart);
}
However, wouldn't it be easier to simply generate the classes automatically rather than require that they be done by hand?