less 精灵图

137 阅读1分钟

#less 精灵图

@pngLen:6;
  .spriteFN(@name, @i,@cur){
    .@{name}{
      background-position:100% @i * (1 / (@pngLen - 1) ) * 100%;
    }
    @{cur}.router-link-active .@{name}{
      background-position:0% @i * (1 / (@pngLen - 1) ) * 100%;
    }
  }

  .pngIcon{ display: block;
      .px(width,100);.px(height,100);margin:0 auto;
      background:url('@{ossImg}/deliver/icon.gif') no-repeat top left;
      background-size:200% 100% * @pngLen;
    }

  .spriteFN(png-color0, 0, li);
  .spriteFN(png-seting0, 1, li);
  .spriteFN(png-peo0, 2, li);
  .spriteFN(png-set0, 3, li);
  .spriteFN(png-vi0, 4, li);
  .spriteFN(png-file0, 5, li);