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

Css rule optimization #103

Closed
klierik opened this Issue Dec 22, 2014 · 7 comments

Comments

Projects
None yet
3 participants
@klierik
Copy link

klierik commented Dec 22, 2014

Hello there.

Thanks you for your module. It very good alternative grunt-compile module.

But a have some problem with CSS optimisation.

By default module generate CSS like:

.icons-add-group-24:before {
    width: 24px;
    height: 24px;
    line-height: 24px;
    background-image: url(../../images/icons.png);
    background-position: -40px -96px
    }

.icons-add-group-24_white:before {
    width: 24px;
    height: 24px;
    line-height: 24px;
    background-image: url(../../images/icons.png);
    background-position: -108px -96px
    }

.icons-bookbark_small_blue:before {
    width: 16px;
    height: 16px;
    line-height: 16px;
    background-image: url(../../images/icons.png);
    background-position: -150px -102px
    }

and my mustache file is

[class^="icons-"]:before,
[class*=" icons-"]:before {
    display: inline-block;
    margin-top: -1px;
    *margin-right: .3em;

    content: '';
    line-height: 16px;
    vertical-align: middle;

    background-repeat: no-repeat;
}

{{#items}}
.icons-{{name}}:before {
    width: {{px.width}};
    height: {{px.height}};

    line-height: {{px.height}};

    background-image: url({{{image}}});
    background-position: {{px.offset_x}} {{px.offset_y}};
}
{{/items}}

So, i don't need for each icon entry background-image: url(../../images/icons.png);
I want set background-image: url(../../images/icons.png); only one time for [class^="icons-"]:before, [class*=" icons-"]:before only and make css file more clearly.

Is it possible todo that?

Thanks

@twolfson

This comment has been minimized.

Copy link
Owner

twolfson commented Dec 22, 2014

Currently the data is only available via each of the items (e.g. items[0].image). I have been tossing around the idea of adding a spritesheet-sprites variable to make iteration easy and I guess adding spritesheet-* would be fitting (e.g. image, height, width).

For now, some possibilities are:

  • Hardcode the background-image into your template as it is custom
  • Change to a templating language that allows for accessing the first element (e.g. walrus)
  • Change to a CSS preprocessor to handle the same data (e.g. LESS, SASS)

@twolfson twolfson closed this in fbc32d1 Dec 23, 2014

@twolfson

This comment has been minimized.

Copy link
Owner

twolfson commented Dec 23, 2014

In grunt-spritesmith@3.4.0, we have added the spritesheet variable to custom templates. For your usage, you should be able to use:

[class^="icons-"]:before {
  background-image: url({{spritesheet.image}});
}

More info can be found in the README:

https://github.com/Ensighten/grunt-spritesmith/tree/3.4.0#templating

@klierik

This comment has been minimized.

Copy link
Author

klierik commented Jan 12, 2015

Thank you very-very much! It`s very helpful! Awesome! Thanks!

But, after compile, it`s some error in path:

[class^="sprite-"]:before,
[class*=" sprite-"]:before {
    display: inline-block;
    margin-top: -1px;
    *margin-right: .3em;

    content: '';
    line-height: 16px;
    vertical-align: middle;

    background-image: url(../../images/sprites.png);
    background-repeat: no-repeat;
}

:(

@twolfson

This comment has been minimized.

Copy link
Owner

twolfson commented Jan 12, 2015

Ah, sorry. That should be 3 braces; we are using mustache which HTML escapes for 2 =/

background-image: url({{{spritesheet.image}}});
@klierik

This comment has been minimized.

Copy link
Author

klierik commented Jan 27, 2015

Thanks you a lot! Perfect :)

@hdwills

This comment has been minimized.

Copy link

hdwills commented Apr 21, 2016

Change to a CSS preprocessor to handle the same data (e.g. LESS, SASS)

  1. The custom template I can't option it, so I rewrite the node_modules\grunt-spritesmith\node_modules\spritesheet-templates\lib\templates\scss.template.handlebars.

    {{#block "sprites-imageurl"}}
    i[class*="-ipad-"] {
        background-image: url({{{spritesheet.image}}});
          @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
                background-image: url({{{retina_spritesheet.image}}});
          }
    }
    {{/block}}
  2. delete about name_image options and mixin sprite-image($sprite) in scss.template.handlebars, scss_retina.template.handlebars.

  3. Grunt task

    // Spritesheet making utility
    sprite: {
      front: {
        src: '<%= config.src %>/images/sprites/*.png',
        retinaSrcFilter: '<%= config.src %>/images/sprites/*@2x.png',
        dest: '<%= config.src %>/images/sprites.png',
        retinaDest: '<%= config.src %>/images/sprites-2x.png',
        destCss: '<%= config.src %>/sass/_sprites.scss',
        cssVarMap: function (sprite) {
          sprite.name = 'icons-ipad-' + sprite.name;
        }
      }
    }
  4. now compiled, it's looks ok. but it rewrite the default template. I want to use custom template.
    sprite-css

This is the same question and I'm want to ask. Thanks! Output a single base css class to specify background-image

@twolfson

This comment has been minimized.

Copy link
Owner

twolfson commented Apr 21, 2016

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.