operation with Less

Question

I have these simply css rules:

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

I'm trying to figure how define a new css rule (ie .newRule) that subtracts 10px on both position-x and position-y using Less.

So if I use class="background one newRule" the compiled css rule will be:

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

N30 · Accepted Answer · 2012-02-28 19:56:32Z

if you are looking for dynamically changing the existing position by just providing newRule , I do not think that's possible.

Following .less code can subtract 10 or any other desired number from the background and you can use that css class while designing your html output.

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

very useful but not exactly what I'm looking for. As you said I need a class or other css solution to dynamically subtract 10px to another css hrMany, many thx anyway :)

Collectives™ on Stack Overflow

operation with Less

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related