SASS mixin 不接受变量

Question

我的 SASS 项目中有以下 mixin:

@mixin define-size($height, $width) {
  width: $width;
  height: $height;
}
@mixin define-square($size) {
  @include define-size($size, $size);
}

我尝试调用它们，但出现编译错误...
我试过:

@mixin define-square(45px);
@mixin define-square(45);
@mixin define-square("45px");
@mixin define-square("45");

每次，我都会得到同样的错误:

Invalid CSS after "...   @mixin define-square(": expected variable (e.g. $foo), was "45px);")

同一 _mixin.scss 中的其他 mixin 工作正常。
我的错误是什么？

Answer 1

要调用一个 mixin，你可以使用 @include 指令，所以不要这样做:

@mixin define-square(45px);
@mixin define-square(45);
@mixin define-square("45px");
@mixin define-square("45");

你应该这样做:

@include define-square(45px);
@include define-square(45);
@include define-square("45px");
@include define-square("45");

参见 http://sass-lang.com/documentation/file.SASS_REFERENCE.html#including_a_mixin

---

回复:您遇到的错误:

SASS 解析器看到 @mixin define-square( 并假设您正在创建一个新的 mixin，因此它正确地期望一个参数列表，即 ($foo, $bar)，但它得到的是 "45px"... —— 所以最终给你这个错误。