Is there a way to remove units from a calc function in CSS

Question

I'm currently using the following rule:

margin-left: calc(((100vw - 624px) / 144) * 5);

At 1200px viewport width this gives a value of 20px. What I actually want, however, is to get a result of 20%. Ideally that would mean changing the multiplication factor of '5' from an integer to '5%'. But in order to do that I need to remove the units from the rest of the calculation, so that calc would be processing 4 * 5% rather than 4px * 5.

In SASS I could divide by 1px, but in calc you can only divide by a number, not a united value.

Is there a way to remove units from part of a calc function?

I don't think there is a way to do this. Also even looking into sass and less, browser support plus math calculation limitations are a hurdle in getting the result you want. I think you may have to use jQuery for this calculation. — Nasir T, Nov 04 '16 at 13:10

score 1 · Answer 1 · answered Feb 10 '18 at 01:09

1

There is a strip-unit function for SASS and other CSS preprocessors, but there's no comparable function in CSS3.

answered Feb 10 '18 at 01:09

Tom

6,567
7
44
72

score 0 · Answer 2 · answered Mar 04 '19 at 08:13

0

There is a postcss-strip-units PostCSS plugin

answered Mar 04 '19 at 08:13

Даниил Пронин

1,338
15
31

Is there a way to remove units from a calc function in CSS

2 Answers2