如果条件<大于操作>，需要您的 SCSS 帮助

问题描述

我在尝试编译以下 SASS 代码时遇到编译错误： 请您帮我解决问题好吗？

@mixin high {
   @if (calc(100% * 1.3333 + 0px) > 900px) {
     min-height: auto !important;
   }
  @else {
    min-height: 100% !important;
  }
}

.main-content {
  .container-fluid {
    @include high;
  }
}

解决方法

函数 calc() 是一个 css 函数，它将直接在浏览器中执行，而不是在 SASS 中。

您可以将此表达式写入 sass，但它会被解释为“写入 css 的代码”，因此 css 可以在浏览器中执行它，但不能直接在 sass 中执行。

所以你的错误的原因是：

您尝试在 @if 指令中使用 calc() 作为函数，用于比较预期结果是否大于某个值。但由于 SASS 不执行 calc()，它认为这是不允许的操作。

解释示例：

// SASS
   border-radius: calc(1px + 1px);

// --> will become in css
  border-radius: calc(1px + 1px);

// but not
   border-radius: 2px;

见：https://sass-lang.com/documentation/syntax/special-functions#calc-clamp-element-progid-and-expression