less配合rem雪碧图的使用

在移动端一个页面有多个小icon小图片的情况下，如果用多张图片来做无疑是增加的页面加载的时间。为了减少http请求数，为了提升页面加载速度，我们建议使用sprite图，将多张图片整合成一张图片，再根据css的背景
background-position来定位，图片尺寸如下：

icon-像素.jpg

Html

<div>
  <i class="icon icon1 w1"></i>
  <i class="icon icon2 w2"></i>
  <i class="icon icon3 w2"></i>
  <i class="icon icon4 w2"></i>
  <i class="icon icon5 w2"></i>
  <i class="icon icon6 w2"></i>
  <i class="icon icon7 w3"></i>
  <i class="icon icon8 w3"></i>
  <i class="icon icon9 w4"></i>
  <i class="icon icon10 w4"></i>
  <i class="icon icon11 w4"></i>
  <i class="icon icon12 w4"></i>
</div>

Less

/**
***************这里的 html font-size = window.screen.width/6.4+"px"
***************会影响下面rem的计算，请跟据自己的实际情况填写下面的rem
*/
.mixin-box-sizing(@value){
    -webkit-box-sizing: @value;
    -moz-box-sizing: @value;
    -ms-box-sizing: @value;
    -o-box-sizing: @value;
    box-sizing: @value;
}
.icon {
  position: relative;
  display: inline-block;
  background: transparent url(../image/icon.png) 0 0 no-repeat;
  background-size: 6.44rem .8rem; //图片大小 644px * 80px
  background-repeat: no-repeat;
  background-position: 0 0;
  overflow: hidden;
  .mixin-box-sizing(border-box);
  &.w1 {
    width: .12rem;
    height: .24rem;
  }
  &.w2 {
    width: .44rem;
    height: .44rem;
  }
  &.w3 {
    width: .46rem;
    height: .46rem;
  }
  &.w4 {
    width: .8rem;
    height: .8rem;
  }
}
.icon1{ background-position: 0 0; }
.icon2{ background-position: -0.12rem 0; }
.icon3{ background-position: -0.56rem 0; }
.icon4{ background-position: -1rem 0; }
.icon5{ background-position: -1.44rem 0; }
.icon6{ background-position: -1.88rem 0; }
.icon7{ background-position: -2.32rem 0; }
.icon8{ background-position: -2.78rem 0; }
.icon9{ background-position: -3.24rem 0; }
.icon10{ background-position: -4.04rem 0; }
.icon11{ background-position: -4.84rem 0; }
.icon12{ background-position: -5.64rem 0; }

end------------------------------------