较少变量的计算

Question

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

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

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

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

后来被称为like

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

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

Answer 1

你的想法是正确的，没有错。更少的 mixins 可以处理这样的情况。但是下面这行代码的实现有一些问题：

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

• 首先，您将@class 变量的值与字符串grid-gutter 连接起来，字符串与变量连接的语法是"string-concatenated-with-@{var}"（注意引号）。然后应该评估名称与连接字符串相同的变量。

• 但是，即使我们将整个内容放在 "@{grid-gutter-@{class}}" 这样的引号中，由于 this answer 中描述的问题，数学运算也不会起作用。

• 由于无法执行数学运算，"@{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);
}