SCSS 混合错误:需要变量名称(例如 $x)

Question

我收到此错误：

While processing files with fourseven:scss (for target web.browser):
   /client/stylesheets/main.scss: Scss compiler error: expected a variable name (e.g. $x)
   or ')' for the parameter list for pos-abs

---

这是我的@mixin：

_mixins.scss：

@mixin pos-abs ($top, $right, $bottom, $left) {
  position: absolute;
  top: percentage($top + 'px' / $h);
  right: percentage($right + 'px' / $w);
  bottom: percentage($bottom + 'px' / $h);
  left: percentage($left + 'px' / $w);
};

---

这就是我称呼@mixin

：

_foo.scss：

@mixin pos-abs(0, 313, 0, 12);

---

这就是我vars声明的地方：

_sizes.scss：

$w: 375px;
$h: 662px;

---

这是我的文件加载顺序：

main.scss：

@import "sizes";
@import "mixins";
@import "foo";

---

附言如果我删除$h和$w vars并在@mixin (e.g. top: percentage($top + 'px' / 662px); )中对其进行硬编码 - 我会收到同样的错误。如果我从@mixin中删除所有+ 'px'并args传递给mixin，例如：@mixin pos-abs(0px, 313px, 0px, 12px); - 错误仍然存在。

我的错误在哪里？

Answer 1

问题 1：

你称呼mixin的方式似乎是错误的。正确的方法是按如下方式调用它：

@include [mixin-name]([mixin-params]);

当你写@mixin pos-abs...时，编译器似乎期望（并且是正确的）一个变量跟随mixin名称，因为这是一个mixin定义语句，因此错误指出它期望一个变量或右括号跟在左括号后面。

---

问题2：

即使解决了该错误，您仍然会遇到percentage功能的问题。在这种情况下，您将通过字符串连接将px附加到数字，这将使整个值转换为字符串而不是数字。这意味着对其的任何数学运算都将失败。

相反，您应该将数字乘以 1px 或加0px 。这不仅会将单位添加到值中，而且还会使其成为一个数字。

$w: 375px;
$h: 662px;
@mixin pos-abs ($top, $right, $bottom, $left) {
  position: absolute;
  top: percentage($top * 1px / $h);
  right: percentage($right * 1px / $w);
  bottom: percentage($bottom * 1px  / $h);
  left: percentage($left * 1px / $w);
};
#demo{
  @include pos-abs(0, 313, 0, 12);
}