用 LESS 让数学在 CSS calc() 中发生

Question

我有以下较少的代码：

.@{namespace}users-row {
     height: calc(100% - (@search-row-height - @vh-antialiasing-number));
}

我已经尝试过：

.@{namespace}users-row {
     height: calc(100% - (@{search-row-height} - @{vh-antialiasing-number}));
}

但这会在编译过程中引发错误。

有没有办法让内括号计算为单个数字，但 LESS 不能同时计算外括号？我打开了 StrictMath 进行编译，这样外部的就不会被评估。我不想使用行转义，因为它会降低可读性。理想情况下，这也是我希望它编译的：

.namespace-users-row {
     height: calc(100% - Xpx)
}

其中 X 是两个变量（都有像素值）的差。

Answer 1

您必须使用“escape”功能：

@namespace:namespace;
@search-row-height:100px;
@vh-antialiasing-number:30px;


.@{namespace}-users-row {
      height: calc(~"100% - " (@search-row-height - @vh-antialiasing-number));
}

更新：

根据 @seven-phases-max 的建议，您还可以编写限制使用转义字符

~

的规则仅适用于

-

符号：

.@{namespace}-users-row {
      height:calc(100% ~"-" (@search-row-height - @vh-antialiasing-number));
}

两者都会产生以下经过处理的 CSS：

.namespace-users-row {
  height: calc(100% - 70px);
}

P.S.：我设置了

@namespace:namespace

变量，因为我认为您还希望拥有选择器名称变量；出于此特定目的，变量名称等于其值。如果没有必要，显然你可以跳过这个声明，去掉

{ }

直接写

.namespace-users-row

Answer 2

据开发人员称，这种行为（不幸的是）是故意的。跟踪它的问题在这里：https://github.com/less/less.js/issues/3221

该线程中提供的解决方法是在计算中使用 Less 函数；

min

有效：

@search-row-height: 10px;
@vh-antialiasing-number: 5px;

a {
    height: calc(100% - min(@search-row-height - @vh-antialiasing-number));
}

这是输出：

$ lessc test.less /dev/stdout
a {
  height: calc(100% - 5px);
}