html - 在这个 mixin 的 @if 语句中，为什么这个大于运算符不起作用？

Question

.container {
  --random: 200px;

  @mixin test() {
    @if (var(--random) > 500px) {
      color: orange;
    }
  }

  @include test();
}

我想要什么：如果变量大于 500px，则.container使用color: orange;.

PS我不知道如何制作一个代码片段来为你重现这个错误。也许有一个网站可以制作您可以建议的小 SASS 片段？

标签： htmlcsssass

Answer 1

正如 Dai 在评论中指出的那样，SASS 变量和自定义属性（又名 CSS 变量）之间存在差异。在您的情况下，您应该使用SASS变量：

.container {
  $random: 200px;

  @mixin test() {
    @if ($random > 500px) {
      color: orange;
    }
  }

  @include test();
}