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;
  }
}
```