Less variable 变量的计算

Question

我的网格对于不同的断点有不同的间距，我希望通过传递给它预定义的变量来动态生成我的 .row 类，例如：

@grid-gutter-xs: 10px;
@grid-gutter-sm: 20px;
...

然后我有一些 mixin，其中一个通过将装订线大小分成两半来生成行负边距：

.grid-row(@class) {
  .row {
    margin-right: -( @{grid-gutter-@{class}} / 2);
    margin-left: -( @{grid-gutter-@{class}} / 2);
  }
}

也就是后来的称呼

@media (min-width: @screen-sm-min) {
    .grid-row(sm);
}

这是一段代码摘录，我可以简单地用另一种方式来避免头痛，但我只是想知道它是不是像这样工作（以及为什么），还是我在语法中遗漏了什么？

Answer 1

你的想法是对的，没有错。 less mixins 可以处理这样的情况。但是实现在下面的代码行中存在一些问题：

margin-right: -( @{grid-gutter-@{class}} / 2);

首先，您将 @class 变量的值与字符串 grid-gutter 连接起来，字符串与变量连接的语法是 "string-concatenated-with-@{var}" （注意引号）。然后应评估名称与连接字符串相同的变量。
但即使我们将整个内容放在像 "@{grid-gutter-@{class}}" 这样的引号内，由于 .
中描述的问题，数学也无法正常工作
因为无法执行数学运算，所以 "@{grid-gutter-@{class}}" / 2 的输出将类似于 20px / 2（字符串连接）。由于整个输出只是一个字符串，否定 -(...) 也会失败并产生错误（此步骤的错误消息令人困惑，但这是一个不同的问题）。

执行此操作的正确方法如下：

将 @{class} 变量的值与 grid-gutter 连接并存储在临时变量中。
像@@var一样使用临时变量（双重引用 - @var是获取临时变量的值，另一个@获取与名称相同的变量的值属性的值计算中的评估字符串）。这是必需的，因为在这种情况下，Less 使输出值成为一个数字，从而支持后面的数学运算。
在此之后，您可以执行 -(@@margin / 2) 或 -1 * @@margin/2 来获取取反值。这两种语法都没有太大的好处，更多的是个人偏好。

代码：

@grid-gutter-xs: 10px;
@grid-gutter-sm: 20px;
.grid-row(@class) {
  .row {
    @margin: "grid-gutter-@{class}";
    margin-right: -1 * @@margin / 2; /* or -(@@margin / 2) */
    margin-left:  -1 * @@margin / 2;
  }
}
@media (min-width: @screen-sm-min) {
    .grid-row(sm);
}
@media (min-width: @screen-xs-min) {
    .grid-row(xs);
}

Less variable 变量的计算

Calculations on Less variable variables

less

less-mixins