SCSS Mixin Ошибка: Ожидается имя переменной (например, $ х)

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. Если удалить $ часов & $ шvars и жёстко их в @mixin(e.g. top: percentage($top + 'px'/662px);) - я получаю ту же ошибку. Если я удалю все + 'px' из своего @mixin и прохожу args в mixin like: @mixin pos-abs(0px, 313px, 0px, 12px); - ошибка сохраняется.

Где моя ошибка?

Answer 1

Задача 1:

, как вы вызываете подмешать кажется неправильным. Правильный путь должен был бы назвать его следующим образом:

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

Когда вы пишете @mixin pos-abs..., компилятор, кажется, ожидать (и это правильно) переменная следовать подмешать имя, как это утверждение определение 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); 
}