CODEWITHSUNDEEP
cssless
ryan
ryan

Reputation: 6655

How to use variable inside css3 calc function with less?

I am using the math option parens-division. Please do not suggest using strict/legacy to resolve this issue.

What I ultimately want is this: calc(100% - 13.75rem)

However, I want to use variables in my defintion. With parens-division I had

@subtract: (220/16rem); // hack to work-around nested math interpretations
.zzz {
    width: calc(~"100% -" @subtract);
}

After updating some of my builds I started getting errors on (220/16rem) so now I have tried

@subtract: (220/16); // hack to work-around nested math interpretations
.zzz {
    width: calc(~"100% - @{subtract}rem");
}

but with no success. Help appreciated

Upvotes: 0

Views: 698

Answers (1)

epanalepsis
epanalepsis

Reputation: 935

I've created a pen to test a combination of your solutions.

Seems to be working: 

@subtract: (220/16rem); // hack to work-around nested math interpretations
.zzz {
    background: red;
    height: 50px;
    width: calc(~"100% - @{subtract}");
}

https://codepen.io/anon/pen/dgZWVe

Upvotes: 1

Related Questions