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";

P.S。如果我删除 $ h ＆amp; $ w vars并在@mixin (e.g. top: percentage($top + 'px' / 662px); )中对其进行硬编码 - 我得到了同样的错误。如果我从+ 'px'删除所有@mixin并将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);
}

SCSS Mixin错误：预期变量名称（例如$ x）

1 个答案: