aslansky/css-sprite — pull request #12 by ck86 (2014-07-09 10:17:59+00:00)
Title: place media query inside of class for better extending

If you don't want to use the `.icon` class in your HTML files you have to copy the whole media query part to your own class.

The current generated less file looks like:

```less
@icon-xy: 0px, 0px, 64px, 64px;

.sprite-width(@sprite) {
width: extract(@sprite, 3);
}

.sprite-height(@sprite) {
height: extract(@sprite, 4);
}

.sprite-position(@sprite) {
@sprite-offset-x: extract(@sprite, 1);
@sprite-offset-y: extract(@sprite, 2);
background-position: @sprite-offset-x @sprite-offset-y;
}

.sprite(@sprite) {
.sprite-position(@sprite);
background-repeat: no-repeat;
overflow: hidden;
display: block;
.sprite-width(@sprite);
.sprite-height(@sprite);
}

.icon {
background-image: url('../img/icons.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('../img/icons-x2.png');
background-size: 64px 64px;
}
}
```

You have to copy the media query part to your own class for each icon:
```less
.my-icon {
.icon;
.sprite(@icon-xy);

@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) {
background-image: url('../img/icons-x2.png');
background-size: 64px 64px;
}
}
```

This would be unnecessary if the media query part is inside of `.icon` class:

```less
.icon {
background-image: url('../img/icons.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) {
background-image: url('../img/icons-x2.png');
background-size: 64px 64px;
}
}
```