Less 较少变量的计算

我的网格对于不同的断点有不同的槽，我希望通过向它传递预定义的变量来动态生成我的

.row

类，例如：

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

然后我有一些mixin，其中一个mixin通过将边距大小一分为二来生成行负边距：

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

---

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

您的想法是正确的，这没有错。较少的混合可以处理这样的情况。但在以下代码行中，实现存在一些问题：

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

• 首先，您要将

  @class

  变量的值与字符串

  连接起来，字符串与变量连接的语法是
  “string concatenated with-@{var}”
  （注意引号）。然后，应计算名称与连接字符串相同的变量
  

• 但是，即使我们把整个东西放在引号中，比如

  “@{grid gotter-@{class}}”

  ，由于中描述的问题，数学也不会起作用

• 由于无法执行数学运算，

  “@{grid gotter-@{class}”/2

  的输出将类似于

  20px/2

  （字符串串联）。由于整个过程的输出只是一个字符串，因此否定

  -（…）

  也将失败并产生错误（此步骤的错误消息令人困惑，但这是另一个问题）

正确的方法如下：

• 将

  @{class}

  变量的值与

  网格槽连接起来

  ，并存储在临时变量中
• 在属性的值计算中使用临时变量，如

  @@var

  （双重引用-

  @var

  用于获取临时变量的值，另一个

  @

  用于获取名称与计算字符串相同的变量的值）。它是必需的，因为在这种情况下，Less使输出值成为一个数字，从而支持后面的数学运算
• 在此之后，您可以执行

  -（@@margin/2）

  或

  -1*@@margin/2

  以获得求反的值。这两种语法都没有什么好处，更多的是个人偏好

代码：

@网格槽xs:10px；
@格栅排水沟sm:20px；
.grid行（@class）{
.行{
@边距：“网格边沟-@{class}”；
右边距：-1*@@margin/2；/*或-（@@margin/2）*/
左边距：-1*@@margin/2；
}
}
@介质（最小宽度：@screen sm min）{
.网格行（sm）；
}
@介质（最小宽度：@screen xs min）{
.网格行（xs）；
}

这是一个很好的例子，说明了一个很好的答案，是什么让堆栈溢出成为如此宝贵的资源！