Question

在我的代码中，我使用了LESS模式匹配mixins。当我尝试将一个参数传递给我的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%);
}

编译时会抛出此错误：

变量@bg未定义

为什么会抛出此错误以及如何解决？

Answer 1

引用较少的网站

如果编译器在mixin调用或声明中看到至少一个分号，它会假定参数由分号分隔，并且所有逗号都属于CSS列表。

以上暗示当您以下面的格式调用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%);
}

LESS编译器说参数未定义

1 个答案: