html - Sass Mixin 值未在从@include 调用时传递

Question

我有几个部分(比如 _one.scss 和 _two.scss)正在调用 SASS。 _one.scss 有以下代码

@mixin wire($num) {
 .parts-field {
  height: 100%;
width: calc(100% * (1/$num) - 10px - 1px);
}

并且在 _two.scss 中有 .mytry { @include电线(3)； }

在我的 main.scss 中正在执行以下操作

@import "../../base/_one.scss"; 
@import "_two.scss";

当我检查 ma​​in.css 时，它显示以下内容:

.mytry .parts{
height: 100%;
width: calc(100% * (1/$num) - 10px - 1px);
}

尽管我说的是 @include wire(3)，但我相信 3 没有通过。样式也不适用于 HTML。将参数传递给 mixins 是否存在根本性错误？

Answer 1

您需要使用字符串插值，即将$num替换为#{$num}:

@mixin wire($num) {
  .parts-field {
    height: 100%;
    width: calc(100% * (1/#{$num}) - 10px - 1px);
  }
}

之所以需要这样做，是因为SASS会将(...)视为必须在编译期间求值的计算，而它不知道calc(... ) 应解释为字符串而不是数学表达式。