Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

SCSS generated doesn't generate "concrete" sprite classes #44

Open
bguiz opened this issue Feb 2, 2015 · 5 comments
Open

SCSS generated doesn't generate "concrete" sprite classes #44

bguiz opened this issue Feb 2, 2015 · 5 comments

Comments

@bguiz
Copy link

bguiz commented Feb 2, 2015

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?

bguiz pushed a commit to bguiz/node-angularity that referenced this issue Feb 2, 2015
…-sprite

- retina spriting out of the box
- generates SCSS, however it is insufficient, see aslansky/css-sprite#44
  - TODO limitation of generated SCSS can be worked around using a custom template
  - Base it upon: https://github.com/aslansky/css-sprite/blob/master/lib/templates/scss.mustache
- TODO connect to main CSS gulp task
- TODO investigate using browserify hooks to look for <i/> tags with classes to determine which files should be sprited
@aslansky
Copy link
Owner

aslansky commented Feb 5, 2015

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
Copy link
Owner

aslansky commented Feb 5, 2015

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.

@aslansky aslansky closed this as completed Feb 5, 2015
@bguiz
Copy link
Author

bguiz commented Feb 5, 2015

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
#44 (comment).

@aslansky
Copy link
Owner

aslansky commented Feb 5, 2015

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.

@aslansky aslansky reopened this Feb 5, 2015
@gargantuan
Copy link

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

3 participants