CODEWITHSUNDEEP
cssless
ericsicons
ericsicons

Reputation: 1495

less css multiply variable with percentage

It is possible to convert a variable to a percentage? The below does not work I get calc(1675%) in the generated css

@hex-width : 67px;
margin: 1px calc(25% * @hex-width);

Upvotes: 2

Views: 3465

Answers (2)

Bram Vanroy
Bram Vanroy

Reputation: 28437

What I thought you meant was this:

margin: 1px ~"calc(25% * @{hex-width})";

which would output

margin: 1px calc(25% * 67px);

Note that this isn't the same as using the float 0.25! The above CSS will get a quarter of the parent's widthn abd multiply it with 67px.

To understand what's going on in LESS, see the documentation. First you override less's own calc-function: you want to echo calc() as is. However, you still want to use a variable in there, so you use String interpolation.

Upvotes: 0

Matt Way
Matt Way

Reputation: 33141

Just use decimal notation:

@hex-width : 67px;
margin: 1px calc(0.25 * @hex-width);

Upvotes: 7

Related Questions