Question

使用变量插值时，我无法计算值。

以下是较少预览网站上的示例：http://goo.gl/GVHXUs

以下是我的代码：

@breakpoint-sm: 600px;
@breakpoint-md: 800px;

.Mq(@breakpoint; @rules; @maxMin: min) {
    & when (@maxMin = min) {
        @query: ~"(min-width: @{breakpoint-@{breakpoint}})";
        @media screen and @query {@rules();};
    }

    & when not (@maxMin = min) {
        @break: ~"@{breakpoint-@{breakpoint}}" - 1;
        @query: ~"(max-width: @{break})";
        @media screen and @query {@rules();};
    }
}

.test {
    .Mq(sm; {
        width: 100%;
        height: 200px
    }; max);

    .Mq(md; {
        width: 100%;
        height: 200px
    });
}

结果：

@media screen and (max-width: 600px - 1) {
  .test {
    width: 100%;
    height: 200px;
  }
}
@media screen and (min-width: 800px) {
  .test {
    width: 100%;
    height: 200px;
  }
}

所以我想要实现的是，当min以外的其他内容传递给@maxMin时，它应该从断点中减去1。我想我现在会成为Stackoverflow的笑柄，但是，我还是无法解决这个问题。

Answer 1

~"@{breakpoint-@{breakpoint}}"的输出始终是一个字符串，因此编译器只是将数字附加到字符串而不是执行数学运算。

一种方法是使用如下所示的临时变量（仅添加了需要修改的部分），然后执行算术运算。

.Mq(@breakpoint; @rules; @maxMin: min) {
  /* the rest of the mixin */

  & when not (@maxMin = min) {
    @temp: ~"breakpoint-@{breakpoint}";
    @break: (@@temp - 1); /* the braces are mandatory, without which it again appends */
    @query: ~"(max-width: @{break})";
    @media screen and @query {@rules();};
  }
}

/* the selector blocks and mixin calls */

以下是我在处理解决方案时发现的一些事情，这些事情让我感到难过。我试图找到原因，并在找到答案时更新答案。

大括号在@break变量中起着重要作用。没有它，媒体查询中的输出仍然是串联。但是，如果在媒体查询之外使用相同的变量（在prop: @break这样的普通属性 - 值对中，则会打印相减的值。）
以下代码返回连接值（800px - 1）
```
@break: ~"@{breakpoint-@{breakpoint}}" - 1;
prop: @break;
```
而下面给出了无效类型＆＃34;操作＆＃34;编译器错误。
```
@break: ~"@{breakpoint-@{breakpoint}}";
prop: @break - 1;
```
虽然我可以看到它们背后的原因（第一个导致字符串连接，而第二个说减法不能发生在字符串值上），我有点难以理解为什么两者之间的行为不一致。

（你绝对不是笑柄。虽然我知道问题的原因，但我需要时间才能找到解决方案。）

从通过变量插值获得的值中减去

1 个答案: