Menu
When I use this calc(100% + 20px) directly in Chromes and Firefox' Inspector it works fine and as shown.
However when I insert it into my less file it gets converted to 120%. What am I doing wrong?
309
The calc() function takes a single expression as its parameter, with the expression's result used as the value. The expression can be any simple expression combining the following operators, using standard operator precedence rules: + Addition.
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.
In the above code example, the calc() function is used to give the width value to the heading. Here , we have used the value of the parent which is set to 100% of the screen width by default. The calc(50% – 100px) means that the width of the heading will be equal to “50% of the width of the parent – 100 px”.
To get the height or width of an element in pixels (including padding and borders), use the offsetHeight and offsetWidth properties of the object. These values are readonly.
Less will try to process all maths including 100% + 20px.
You could either set Strict Math on:
lessc -sm=on
lessc --strict-math=on
Or use a tilde-quote ~"100% + 20px" in order to prevent the statement from being processed by Less.
For instance:
.class {
padding-left: calc(~"100% + 20px");
}
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
