使用 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

使用 LESS 在 CSS calc() 中进行数学运算

Make math happen inside CSS calc() with LESS

css

less