LESS css：评估函数“floor”时出错：参数必须是数字

Question

我正在尝试像这样计算 LESS 计算的下限：

@small_width: calc(~'24vw - 6px');
@floor_small_width: floor(@small_width);

但不断收到此错误：

error evaluating function `floor`: argument must be a number

根据我的理解，@small_width 直到运行时才会计算，因此直到运行时它永远不会是一个数字。是否有解决方法，我可以在运行时根据计算获得计算值的底数？

为我的问题添加更多颜色：

我有两种基于视口的照片尺寸：

            &.small{
                width: calc(~'24vw - 6px');
                height: calc(~'24vw - 6px');
            } // &.small
            &.large{
                width: calc(~'48vw - 6px');
                height: calc(~'48vw - 6px');
            } // &.large

我需要 4 张小照片才能装进 1 张大照片。问题在于小数精度和视口。取决于视口，4 张小照片不适合一张大照片。

我想得到小照片的底板，这样我就可以根据小照片的尺寸计算大照片。

Answer 1

您不能将 calc() 结果存储在变量中，因为 calc() 是在运行时由浏览器计算的，而变量是在预编译阶段由 LESS 计算的。两人互不相识

相反，您需要对使用它的每个属性进行 calc() 操作，并且不能在其上使用 LESS 数学函数。也就是说，您不必担心取底值，因为浏览器可以很好地处理浮点数。

.something {
  width: calc(24vw - 6px);
  height: calc(24vw - 6px);
}

更新： 视口单位和浏览器小数精度永远不会导致换行。最有可能发生的情况是您在项目上设置了填充或边框。为了使填充和边框不影响元素的整体宽度，您需要将 box-sizing 属性设置为 border-box.

.small {
  box-sizing: border-box;
}

LESS css：评估函数“floor”时出错：参数必须是数字

LESS css: error evaluating function `floor`: argument must be a number

javascript

css

less