SCSS Mixin錯誤：預期為變量名（例如$ 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";

---

PS：如果我刪除$ h和$ w vars並在@mixin對其進行硬編碼(eg top: percentage($top + 'px' / 662px); ) @mixin (eg top: percentage($top + 'px' / 662px); )收到相同的錯誤。 如果我從@mixin刪除所有+ 'px'並將args傳遞給mixin，例如： @mixin pos-abs(0px, 313px, 0px, 12px); -錯誤仍然存​​在。

我的錯誤在哪里？

Answer 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);
}