使用 Less mixins 从 sprite 自动计算响应图像

Question

任何人都可以建议我使用 less mixin 的集合来自动计算 CSS 来自 sprite 的响应图像的属性吗？我需要这样的结果代码：

background-image: url();

background-position: % %;

background-size: % %;

padding-top: % %;

width: %;

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

Answer 1

也许resprite-less可以帮到你。

示例：

初始数据：

spr-url = "../img/spr.png"
spr-width = 382px
spr-height = 556px
img1-宽度 = 322px
img1-height = 238px
x1 = 40px
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

使用 Less mixins 从 sprite 自动计算响应图像

Automatic calculation responsive images from sprite with Less mixins

html

css

less

示例：