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 puted 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.

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 puted 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.

• javascript
• css
• less

• 1 What would you need this for? Browsers are capable of rounding themselves wherever necessary. If you want any element to be as wide as 24 percent of the viewport width minus six pixels is - then you can just put calc(~'24vw - 6px') there, so what you would need this floor-ed value in a variable for, is apart from the technical impossibility, really unclear. Please go read How to Ask, and describe what the actual problem you are trying to solve here is. – C3roe Commented Nov 27, 2017 at 20:49
• @small_photo_width is not defined in your example. – Michael Geary Commented Nov 27, 2017 at 20:55
• @CBroe I have added the exact context to my problem – Sonx Commented Nov 27, 2017 at 20:57
• You don't need calc in your new example. – Soviut Commented Nov 27, 2017 at 21:06
• @Sonx I've updated my answer. This isn't an issue of decimal precision. It's most likely being caused by padding or borders contributing to the width of the element. – Soviut Commented Nov 27, 2017 at 21:10

1 Answer 1

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-pilation 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;
}