Menu
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?
336
calc() The calc() CSS function lets you perform calculations when specifying CSS property values. It can be used anywhere a <length> , <frequency> , <angle> , <time> , <percentage> , <number> , or <integer> is allowed.
Example of using the calc() function with CSS variablesUsing calc() with CSS variables, we can define a value once and modify it using math in order to get a new value which will be useful for us.
Custom properties and calc are the same computational amount as any other property or relative value, respectively. In short: no more than large amounts of CSS would.
calc() is a native CSS way to do simple math right in CSS as a replacement for any length value (or pretty much any number value). It has four simple math operators: add (+), subtract (-), multiply (*), and divide (/).
There is a strip-unit function for SASS and other CSS preprocessors, but there's no comparable function in CSS3.
150
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
