LESS css: error evaluating function `floor`: argument must be a number
I am trying to calculate the floor of a LESS calculation like so:
@small_width: calc(~'24vw - 6px');
@floor_small_width: floor(@small_width);
but keep getting this error:
error evaluating function `floor`: argument must be a number
From my understanding @small_width isn't calculated until runtime so it will never be a number until runtime. Is there a workaround for this where I can get the floor of a computed value based a calculation at runtime?
To add more color to my problem:
I have two photo sizes based on the viewport:
&.small{
width: calc(~'24vw - 6px');
height: calc(~'24vw - 6px');
} // &.small
&.large{
width: calc(~'48vw - 6px');
height: calc(~'48vw - 6px');
} // &.large
I need 4 small photos to fit into 1 big photo. the problem is with decimal precision and the viewport. Depending on the viewport 4 small photos do not fit in exactly one big photo.
I want to get the floor of the small photo so I can base the big photo calculation off the size of the small photo.
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;
}