少用操作

Question

我有这些简单的css规则：

.background {background-image : url(pics/bg.png)}

.background.one {background-position: -10px -10px}
.background.two {background-position: -20px -20px}

我试图想一下如何定义一个新的css规则（即.newRule），它使用Less减去位置x和位置y上的10px。

因此，如果我使用class =“background one newRule”，编译的css规则将为：

{
    background-image : url(pics/bg.png);
    background-position: -20px -20px
}

Answer 1

如果你想通过提供newRule来动态改变现有的位置，我认为这是不可能的。

以下.lessless代码可以从后台减去10或任何其他所需的数字，您可以在设计html输出时使用该css类。

.background
{
    background-image : url(pics/bg.png);
}

.newrule(@val:0)
{
    .background;
    background-position: (-10px - @val) (-10px - @val);
}

.background-one

{
    .newrule();
}

.background-two

{
    .newrule(10);
}

.background-three

{
    .newrule(20);
}