less css multiply variable with percentage

Question

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

We're confused as to what you want. Could you post expected CSS output? — Bram Vanroy, Nov 30 '15 at 20:47
what Matt Way suggest is correct I just thought you could calculate a percentage of a variable without using decimal notation — ericsicons, Nov 30 '15 at 20:50
Alright! Make sure to accept their answer. For completeness sake, I added and updated my answer on what I thought your question was. — Bram Vanroy, Nov 30 '15 at 20:56
Don't use `calc`. Do `margin: 1px (@hex-width * 25%/100%);` or simply `margin: 1px (@hex-width * .25);` — seven-phases-max, Nov 30 '15 at 21:29
Possible duplicate of [How to convert a numeric value into a percentage (or) append percentage symbol to a number?](http://stackoverflow.com/questions/6978626/how-to-convert-a-numeric-value-into-a-percentage-or-append-percentage-symbol-t) — seven-phases-max, Nov 30 '15 at 21:32

score 7 · Accepted Answer · answered Nov 30 '15 at 20:42

7

Just use decimal notation:

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

answered Nov 30 '15 at 20:42

Matt Way

32,319
10
79
85

1

I think he wants to get 25% width of the parents width, not a fourth of @hex-width – Bram Vanroy Nov 30 '15 at 20:43
2

I'm not sure that is clear. He said he wants a variable to a percentage, nothing to do with the parent (but I could be wrong). – Matt Way Nov 30 '15 at 20:45

score 0 · Answer 2 · answered Nov 30 '15 at 20:52

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.

less css multiply variable with percentage

2 Answers2