Example
By default, LESS will use its own calc() unless told otherwise. So:
@column-count: 2;
.class-example {
width: calc(100% / @column-count);
}
Would compile to this:
.class-example {
width: 50%;
}
While it is our desired width, LESS has used it's own calc() function to calculate the width. The calc() function never makes it to our CSS. If you would like LESS to not use its calc() function, you need to escape your values like this:
width: calc(~"100% - @{column-count}");
Here we've prepended our values with a ~ and wrapped them in quotation marks. Variables can be referenced as well, but you must wrap the variable name in { } brackets. This allows you use the CSS calc() function for more complex calculations like this:
@column-count: 2;
@column-margin: 24px;
.class-example {
width: calc("~(100% / @{column-count}) - @{column-margin}");
}
This compiles to:
.class-example {
width: calc((100/2) - 24px);
}
