LESS компилятор говорит, что параметр не определен

Question

В моем коде я использую LESS-шаблоны, сопоставляющие mixins. Когда я пытаюсь передать аргумент в свой микс, я получаю сообщение об ошибке.

Это мой код:

.slide(parallax; @bg, @padding) { 
    background: url(@bg) 50% 0 fixed; 
    height: auto; 
    margin: 0 auto; 
    width: 100%; 
    position: relative; 
} 

.slide(np; @bg, @padding) { 
    background-color: @bg; 
} 

.slide(@_; @bg, @padding) { 
    padding: @padding 0; 
} 

@slide: parallax; 
#ghp { 
    .slide(@slide; "../images/ghp.png", 12%); 
} 

После компиляции он выдает эту ошибку:

variable @bg is undefined

Почему эта ошибка броска, и как я могу это исправить?

Answer 1

Quoting Less Website

If the compiler sees at least one semicolon inside mixin call or declaration, it assumes that arguments are separated by semicolons and all commas belong to CSS lists.

Из вышеизложенного следует, что при вызове mixin в нижнем формате вызов mixin имеет только 2 значения (или параметры). Первый параметр имеет значение @slide переменной, а вторая - вся оставшаяся часть (которая равна "../images/ghp.png", 12%).

.slide(@slide; "../images/ghp.png", 12%); 

Именно по этой причине вы получаете сообщение об ошибке, указав, что одна из переменных не определена. Это можно преодолеть, используя один и тот же разделитель (либо в виде двоеточия, либо в коме, причем предпочтение - в виде двоеточия).

Так, например, приведенный ниже код будет компилироваться отлично.

.slide(parallax; @bg; @padding) { 
    background: url(@bg) 50% 0 fixed; 
    height: auto; 
    margin: 0 auto; 
    width: 100%; 
    position: relative; 
} 

.slide(np; @bg; @padding) { 
    background-color: @bg; 
} 

.slide(@_; @bg; @padding) { 
    padding: @padding 0; 
} 

@slide: parallax; 
#ghp { 
    .slide(@slide; "../images/ghp.png"; 12%); 
}