работа с Меньше

Question

У меня есть эти просто правила CSS:

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

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

Я пытаюсь понять, как определить новое правило CSS (то есть .newRule), которое вычитает 10px как для position-x, так и position-y, используя Less.

Так что, если я использую class = "background one newRule", скомпилированное правило css будет:

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

Answer 1

Если вы ищете динамическое изменение существующей позиции, просто предоставив newRule, я не думаю, что это возможно.

Следующий код .less может вычесть 10 или любое другое желаемое число из фона, и вы можете использовать этот класс css при проектировании вывода html.

.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);
}