使用Less mixins自动计算来自精灵的响应图像

Question

有人可以告诉我一些较少的mixins用于自动计算来自sprite的响应式图像的CSS属性吗？我需要一个像这样的结果代码：

  

background-image：url（）;

     

background-position：%%;

     

background-size：%%;

     

padding-top：%%;

     

宽度：％;

我知道如何手动计算，但需要很长时间。感谢

Answer 1

也许resprite-less可以帮到你。

实施例

初步数据：

1. spr-url =＆＃34; ../ img / spr.png＆＃34;
2. spr-width = 382px
3. spr-height = 556px
4. img1-width = 322px
5. img1-height = 238px
6. x1 = 40px
7. y1 = 42px

HTML：

    <!--Any parent container-->
    <div class="container">
        <!--Responsive background image element-->
        <div class="img1"></div>
    </div>

减：

    .img1 {
        .rs("../img/spr.png", 382, 556, 322, 238, 40, 42);
    }

上面的代码resprite.less将编译为这样的CSS代码：

    .img1 {
        background: url("../img/spr.png") 66.67% 13.21%;
        background-size: 118.63% 233.61%;
        padding-top: 73.91%;
        width: 100%;
    }

Demo