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);
  }
}

后面称之为

@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是获取临时变量的值而另一个@获取名称与已评估的变量相同的变量的值string）在属性的值计算中。这是必需的，因为在这种情况下，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);
}

关于较少变量变量

1 个答案: