css - LESS 编译器说参数未定义

Question

在我的代码中，我使用了 LESS 模式匹配混合宏。当我尝试将一个参数传递到我的 mixin 中时，出现错误。

这是我的代码:

.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%);
}