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

【问题标题】：In this mixin's @if statement, why won't this greater-than operator work?在这个 mixin 的 @if 语句中，为什么这个大于运算符不起作用？
【发布时间】：2021-04-14 17:43:21
【问题描述】：

.container {
  --random: 200px;

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

  @include test();
}

我想要什么：如果变量大于 500 像素，则将 .container 样式设置为 color: orange;。

附：我不确定如何制作一个 code-sn-p 来为您重现此错误。也许有一个网站可以制作小 SASS sn-ps 你可以推荐吗？

【问题讨论】：

您不能在@if 中使用var()。如果您将代码粘贴到sassmeister.com，您将收到未定义操作错误。
--random 是 CSS 自定义属性，而不是 SASS/SCSS 变量。
@Dai Gutted。感谢您的链接。没有允许 CSS 变量的 SASS 条件逻辑吗？
我认为您需要了解与 CSS 自定义属性相比，SCSS 变量的工作原理。
相关：stackoverflow.com/q/56669587/8620333（你想要做的不能用CSS变量或SASS，JS或阅读我链接的答案）

标签： html css sass

【解决方案1】：

正如 Dai 在 cmets 中指出的那样，SASS variables 和 custom properties（又名 CSS 变量）之间存在差异。在您的情况下，您应该使用 SASS 变量：

.container {
  $random: 200px;

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

  @include test();
}

【讨论】：

在我的情况下不可能使用 SASS 变量。我制作了一个 CSS 变量，每次调整屏幕大小时都会捕获某个元素的宽度。已转向其他解决方案
啊，那么这个条件无论如何也行不通，因为它只存在于编译之前。