Improved scss stylesheet template

[ocrest]

Sometimes it's necessary to include only some properties of the current sprite's mixin (background-image, for example).

I added in the scss stylesheet template new mixins for background-image, background-size, background-position, width and height, and included them in the main mixin. Also new variables were added for the each image in sprite. The output scss file now looks like this:

$foo_x: 0;
$foo_y: 0;
$foo_width: 75px;
$foo_height: 6px;
$foo: $foo_x $foo_y $foo_width $foo_height;
$bar_x: 0;
$bar_y: -6px;
$bar_width: 75px;
$bar_height: 12px;
$bar: $bar_x $bar_y $bar_width $bar_height;
$test_x: 0;
$test_y: -18px;
$test_width: 75px;
$test_height: 6px;
$test: $test_x $test_y $test_width $test_height;

@mixin sprite_image {
  background-image: url("./images/png/sprite.png");
}
@mixin sprite_size {
  background-size: 75px 78px;
}
@mixin sprite_position($sprite) {
  background-position: nth($sprite, 1) nth($sprite, 2);
}
@mixin sprite_width($sprite) {
  width: nth($sprite, 3);
}
@mixin sprite_height($sprite) {
  height: nth($sprite, 4);
}
@mixin sprite($sprite) {
  @include sprite_image;
  @include sprite_size;
  @include sprite_position($sprite);
  @include sprite_width($sprite);
  @include sprite_height($sprite);
}

I made it only for scss template, but I think that it also should be done for the sass, less and stylus.

[coveralls]

Coverage remained the same when pulling aad01e298f0a252819283dd73811576326a0e5e6 on filippovdaniil:master into 375b918fc07a5f6aab2650ee9daf1d39455133aa on selaux:master.

[selaux]

Totally agree with you, those additional mixins can prove very useful.

• Can we change the syntax from _image, _size, etc. to -image, -size (I just dislike underscores in css)
• Are the additional variables necessary, what is a use case for them? (I dont want to clutter the namespace)

[ocrest]

Can we change the syntax from _image, _size, etc. to -image, -size (I just dislike underscores in css)

In Sass dashes and underscores are interchangeable, so the mixin named sprite_image can be included both with

@include sprite-image;

and

@include sprite_image;

But I've just replaced all underscores with dashes to make all things look same :)

Are the additional variables necessary, what is a use case for them? (I dont want to clutter the namespace)

These can be useful when calculating some other CSS properties: for example, we have a sprite for social "share" buttons (for Facebook, Twitter, etc.) and the line-height property for the each button should be equal to it's height.

Now we can achieve this only using Sass nth function:

.social-share.facebook{
...
    // Assume that we set prefix to "share-buttons-"
    line-height: nth( $share-buttons-facebook, 4 );
}

— it looks overkill for me — I don't like any sort of "magic numbers" in the code.

Also these variables can be used in third-party mixins for creating styles with sprite backgrounds ("sprite in sprite" case).

And the last use case — just to make this:

    @include share-buttons-sprite-width( $share-buttons-facebook );
    @include share-buttons-sprite-height( $share-buttons-facebook );

more shorter and clear:

    width: $share-buttons-facebook-width;
    height: $share-buttons-facebook-height;

(of course, in that case it is matter of taste, but I think someone would prefer to use these variables instead of mixins).

[coveralls]

Coverage remained the same when pulling a5f9bf72cbd2590d65957dfbe6fa966032759475 on filippovdaniil:master into 375b918fc07a5f6aab2650ee9daf1d39455133aa on selaux:master.

[selaux]

Sweet, thanks. I will need to implement the same stuff for the other preprocessor languages before I release a new version. :beers: