When using division with calc the result will be a number and not an integer thus it won’t work because the repeat() expect an interger The generic form of the repeat() syntax is, approximately, repeat( [ <positive-integer> | auto-fill | auto-fit ] , <track-list> )ref And At /, check that the right side is <number>. … Read more
Unfortunately, there is no more mention of the mod operator in recent specs. The calc() function allows mathematical expressions with addition (+), subtraction (-), multiplication (*), and division (/) to be used as component values. You may want to resort to using javascript to achieve such behaviour. var el = document.getElementById(‘element-id’); el.style.width = (100 % … Read more
Tables have difficult rules about distributing the space of the columns because they distribute space dependent on the content of the cells by default. Calc (atm) just wont work with that. What you can do however is to set the table-layout attribute for the table to force the child td elements to get the exact … Read more
You need to add a unit to 0 otherwise it’s confusing for the browser to handle the comparison between a uniteless value (a <number>) and a value with unit (a <length>) and the top property accept a <length> not a <number> top: max(0px, 120vh – 271px) To understand this, you need to follow the specification: … Read more
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
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
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
You need to add spaces between operators, it’s a common mistake to forget them. We can also nest operation using calc as many as we want but they are equivalent to simple parentheses. From the documentation: Note: The + and – operators must be surrounded by whitespace. For instance, calc(50% -8px) will be parsed as … 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
Is there a way to validate/highlight formulas errors? You need to check to see if you aren’t breaking any rules when defining your formula. Here it is from the specification: At each operator, the types of the left and right argument are checked for these restrictions. If compatible, the type resolves as described below (the … Read more