I am trying to calculate the floor of a LESS calculation like so:
@small_width: calc(~'24vw - 6px');
@floor_small_width: floor(@small_width);
error evaluating function `floor`: argument must be a number
&.small{
width: calc(~'24vw - 6px');
height: calc(~'24vw - 6px');
} // &.small
&.large{
width: calc(~'48vw - 6px');
height: calc(~'48vw - 6px');
} // &.large
You can't store a calc()
result in a variable because calc()
is evaluated at runtime by the browser, while the variable is evaluated by LESS in the pre-compilation stage. The two don't know anything about each other.
Instead, you need to put the calc()
operation on every attribute that uses it and you cannot use LESS math functions on it. That said, you shouldn't need to worry about flooring a value since browsers can handle the floating point numbers just fine.
.something {
width: calc(24vw - 6px);
height: calc(24vw - 6px);
}
UPDATE: Viewport units and the browser decimal precision should never cause wrapping. What's most likely happening is you've got padding or a border set on the items. In order to make padding and borders not contribute to the overall width of the element, you need to set the box-sizing
attribute to border-box
.
.small {
box-sizing: border-box;
}