Retina Sprites with LESS variables

sprite.less

//Less Variables 
@spritePath: "../img/sprite.png"; //Path of standard sprite
@spritePathx2: "../img/sprite-retina.png"; //Path of retina sprite 
@1xSpriteSizeW: 1000px; //Width of standard sprite  
@1xSpriteSizeH: 1000px; //Height of standard sprite


//Sprite defaults
[class^="sprite-"],
[class*=" sprite-"] {
  display: inline-block;
  width: 14px;
  height: 14px;
  line-height: 14px;
  vertical-align: text-top;
  background-image: url("@{spritePath}");
  background-repeat: no-repeat;
}


//Sprites
.sprite-icon1 { background-position: 0 0; width: 50px; height: 50px; }
.sprite-icon2 { background-position: 100px 100px; width: 30px; height: 30px; }


//Retina displays
@media only screen and (-webkit-min-device-pixel-ratio: 2), 
only screen and (min-device-pixel-ratio: 2) {     
  [class^="sprite-"],
  [class*=" sprite-"] {
    background-image:url("@{spritePathx2}");
    background-size:@1xSpriteSizeW @1xSpriteSizeH;
  }
}