ANSWER EDITED AGAIN 21.03.2022: In the current version of the spec, using calc (or var) in media queries is NOT supported by the spec (as TylerH pointed out below). Properties sometimes accept complex values, e.g., calculations that involve several other values. Media features* only accept single values: one keyword, one number, etc. * Media features … Read more
To disable the calculation which LESS does automatically when discovering a – between two numeric values but still being able to use variables, you can write one of the following: 1) Only escape the operator that triggers the calculation and use the variable like you normally do @padding: 20px; body { padding: calc(100% ~”-” @padding); … Read more
Before I answer this, I’d like to point out that Chrome and IE 10+ actually supports calc with viewport units. FIDDLE (In IE10+) Solution (for other browsers): box-sizing 1) Start of by setting your height as 100vh. 2) With box-sizing set to border-box – add a padding-top of 75vw. This means that the padding will … Read more
In order to use a Stylus variable inside a calc expression, one must employ the string % operator: arrow-size = 5px left “calc(50% – %s)” % arrow-size
Almost always box-sizing: border-box can replace a calc rule such as calc(100% – 500px) used for layout. For example: If I have the following markup: <div class=”sideBar”>sideBar</div> <div class=”content”>content</div> Instead of doing this: (Assuming that the sidebar is 300px wide) .content { width: calc(100% – 300px); } Do this: .sideBar { position: absolute; top:0; left:0; … Read more
Less no longer evaluates expression inside calc by default since v3.00. Original answer (Less v1.x…2.x): Do this: body { width: calc(~”100% – 250px – 1.5em”); } In Less 1.4.0 we will have a strictMaths option which requires all Less calculations to be within brackets, so the calc will work “out-of-the-box”. This is an option since … Read more
Using an escaped string (a.k.a. escaped value): width: ~”calc(100% – 200px)”; Also, in case you need to mix Less math with escaped strings: width: calc(~”100% – 15rem +” (10px+5px) ~”+ 2em”); Compiles to: width: calc(100% – 15rem + 15px + 2em); This works as Less concatenates values (the escaped strings and math result) with a … Read more
Interpolate: body height: calc(100% – #{$body_padding}) For this case, border-box would also suffice: body box-sizing: border-box height: 100% padding-top: $body_padding