SCSS generated doesn't generate "concrete" sprite classes

[bguiz]

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?

[aslansky]

If you use css as the output format css-sprite will generate the classes for you. When using a pre-pocessor like scss it just generates the needed mixins.

[aslansky]

Or you could also create your own template for generating scss. Have a look at the templates that come with css-sprite in lib/templates.

[bguiz]

Yup, I am aware of that.

The thing is that I am not sure why that should be the case. Generally I want to have sprite classes generated for every single sprite that is inside the output image.

It is quite a simple addition to the basic template too, like I have done here: https://github.com/bguiz/node-angularity/blob/feature/sprites/tasks/sprites.scss.mustache#L51-L53

I know I can always create a custom template, just think that this should be the default behaviour.

W: http://bguiz.com

On 5 February 2015 at 20:23, Alexander Slansky [email protected] wrote:

Or you could also create your own template for generating scss. Have a look at the templates that come with css-sprite in lib/templates.

— Reply to this email directly or view it on GitHub https://github.com/aslansky/css-sprite/issues/44#issuecomment-73016854.

[aslansky]

Yeah ok. We have different opinions about that. I want to keep the generated styles as small as possible, but I can see why this would be helpful. I'll reopen the issue a a reminder for me. Right now I am just filled up with work stuff.

[gargantuan]

I just had to do something simmilar in a project I'm working on. I would suggest creating your own template and using something like this at the end of your template

{{#items}}
.icon-{{name}}
    @extend .icon
    sprite(${{name}})

{{/items}}

I agree with @aslansky that the generated styles should be as small as possible. I feel it should be left to individuals to create their own concrete-classes via the template mechanism.

EDIT: Sorry, I should have read the comments more closely - it appears you've already arrived at this solution.