Update json2css.js #43

Closed
wants to merge 1 commit into
from

Conversation

Projects
None yet
2 participants
@AnatoliyLitinskiy

if we will made this changes and add this:
sizesGroups: params.sizesGroups

to node_modules/css-sprite/lib/css-sprite.js
and add some changes to mustache template (described bellow)

we will get rules, grouped by sizes:

.foo, .bar {
  width: 16px;
  height: 16px; }

.foo, .bar {
  overflow: hidden;
  display: inline-block;
  background-image: url('/images/sprite.png');
  background-repeat: no-repeat;
  background-color: transparent; }

.foo {
  background-position: -4px -680px; }

.bar {
  background-position: -4px -680px; }

mustache template:

$sprites-total-width: {{items.0.px.total_width}};
$sprites-total-height: {{items.0.px.total_height}};
$sprites-background-image: '{{{escaped_image}}}';

{{#sizesGroups}}
// {{width}}x{{height}}
%size-group-{{width}}x{{height}} {
  width: {{width}}px;
  height: {{height}}px;
}
{{/sizesGroups}}

%sprite-icon {
  overflow: hidden;
  display: inline-block;
  background-image: url($sprites-background-image);
  background-repeat: no-repeat;
  background-color: transparent;
}

@mixin NAME_IT_AS_YOU_WISH($sprite) {
  @extend %sprite-icon;
  $sprite-offset-x: nth($sprite, 1);
  $sprite-offset-y: nth($sprite, 2);
  background-position: $sprite-offset-x $sprite-offset-y;
{{#sizesGroups}}
  @if nth($sprite, 3) == {{width}}px and nth($sprite, 4) == {{height}}px {
    @extend %size-group-{{width}}x{{height}}
  }
{{/sizesGroups}}
}
Update json2css.js
if we will made this changes and add this:
`sizesGroups: params.sizesGroups`

to node_modules/css-sprite/lib/css-sprite.js
and add some changes to mustache template (described bellow)

we will get rules, grouped by sizes:

```css
.foo, .bar {
  width: 16px;
  height: 16px; }

.foo, .bar {
  overflow: hidden;
  display: inline-block;
  background-image: url('/images/sprite.png');
  background-repeat: no-repeat;
  background-color: transparent; }

.foo {
  background-position: -4px -680px; }

.bar {
  background-position: -4px -680px; }
```

mustache template:

$sprites-total-width: {{items.0.px.total_width}};
$sprites-total-height: {{items.0.px.total_height}};
$sprites-background-image: '{{{escaped_image}}}';

{{#sizesGroups}}
// {{width}}x{{height}}
%size-group-{{width}}x{{height}} {
  width: {{width}}px;
  height: {{height}}px;
}
{{/sizesGroups}}

%sprite-icon {
  overflow: hidden;
  display: inline-block;
  background-image: url($sprites-background-image);
  background-repeat: no-repeat;
  background-color: transparent;
}

@mixin NAME_IT_AS_YOU_WISH($sprite) {
  @extend %sprite-icon;
  $sprite-offset-x: nth($sprite, 1);
  $sprite-offset-y: nth($sprite, 2);
  background-position: $sprite-offset-x $sprite-offset-y;
{{#sizesGroups}}
  @if nth($sprite, 3) == {{width}}px and nth($sprite, 4) == {{height}}px {
    @extend %size-group-{{width}}x{{height}}
  }
{{/sizesGroups}}
}
@twolfson

This comment has been minimized.

Show comment
Hide comment
@twolfson

twolfson Aug 27, 2015

Owner

While this works in saving a bit of CSS, it adds in complexity and starts to enter CSS optimization territory. We are of the stance that combining these CSS rules should be done by a CSS optimizer. Please see the following issue for more information:

#11

Additionally, there is CSSO which should work as well:

http://bem.info/tools/csso/

Owner

twolfson commented Aug 27, 2015

While this works in saving a bit of CSS, it adds in complexity and starts to enter CSS optimization territory. We are of the stance that combining these CSS rules should be done by a CSS optimizer. Please see the following issue for more information:

#11

Additionally, there is CSSO which should work as well:

http://bem.info/tools/csso/

@twolfson twolfson closed this Aug 27, 2015

@twolfson

This comment has been minimized.

Show comment
Hide comment
@twolfson

twolfson Aug 27, 2015

Owner

P.S. I am going on vacation for 2 weeks starting tomorrow so I will be unresponsive for a while.

Owner

twolfson commented Aug 27, 2015

P.S. I am going on vacation for 2 weeks starting tomorrow so I will be unresponsive for a while.

@twolfson twolfson referenced this pull request in twolfson/grunt-spritesmith Jan 15, 2016

Closed

zero-units #156

@twolfson twolfson referenced this pull request in twolfson/spritesmith Jan 25, 2016

Closed

Disallow units for zero values #61

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