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
Closed

Css rule optimization #103

klierik opened this issue Dec 22, 2014 · 7 comments

Comments

@klierik
Copy link

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

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

@twolfson 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
Copy link
Author

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

@twolfson 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
Copy link
Author

@klierik klierik commented Jan 27, 2015

Thanks you a lot! Perfect :)

@hdwills
Copy link

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

@twolfson twolfson commented Apr 21, 2016

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

Successfully merging a pull request may close this issue.

None yet
3 participants