javascript - 有护卫的Lesscss Mixins。语法错误

我在客户端使用Lesscss编写CSS（使用less.js编译器）。

在文档中有一些很好的例子说明了守卫的用法，但对我而言不起作用。我不明白，为什么...

代码示例在这里：

@import "common-functions.less";

// variables
@minHeaderWidth: auto;
@maxHeaderWidth: 1200px;

@minButtonsWidth: 50px;
@maxButtonsWidth: 75px;

// Mixins with guards
.applyHeaderStyles(@headerWidth, @buttonsWidth) when (ispixel(@headerWidth)) {
    .my-headerElement {
        width: @headerWidth;
    }
}
.applyHeaderStyles(@headerWidth, @buttonsWidth) when not (ispixel(@headerWidth)) {
    .my-headerElement {
        width: @headerWidth;
        margin: 0 @buttonsWidth;
    }
}

// than I use .applyHeaderWidth in @media queries
@media screen and (min-width: 1050px) {
    .applyHeaderStyles(@maxHeaderWidth, @maxButtonsWidth);
    .my-buttonElement {width: @maxButtonsWidth;}
}
@media screen and (max-width: 1049px) {
    .applyHeaderStyles(@minHeaderWidth, @minButtonsWidth);
    .my-buttonElement {width: @minButtonsWidth;}
}

代码是由文档编写的。但这是行不通的。
执行此代码时，出现语法错误：

第10行的语法错误
[链接到我的文件]第10行，第58列：
10 //带有守卫的Mixins
11 .applyHeaderStyles（@headerWidth，@buttonsWidth）when（ispixel（@headerWidth））{
12 .my-headerElement {

最佳答案

如here所述，更新到less.js 1.2.2可解决此问题。

从changelog：

1.2.0
Mixin guards

关于javascript - 有护卫的Lesscss Mixins。语法错误，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/9633415/