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

您必须使用＆＃34; escape＆＃34;功能：

@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变量，因为我认为你想要也有选择器名称变量;为此特定目的，变量名称等于其值。如果没有必要，显然您可以跳过此声明并直接删除{ }

使用LESS在CSS calc（）内部进行数学运算

1 个答案: