带有守卫的 Lesscss Mixins。语法错误答案

【问题标题】：Lesscss Mixins with guards. Syntax Error带有守卫的 Lesscss Mixins。语法错误
【发布时间】：2016-03-02 06:49:29
【问题描述】：

我在客户端使用 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 // 带守卫的混合 11 .applyHeaderStyles(@headerWidth, @buttonsWidth) 当 (ispixel(@headerWidth)) { 12 .my-headerElement {

【问题讨论】：

我已将 less.js 版本更新到 1.2.2。现在它可以工作了。通过链接找到答案：stackoverflow.com/questions/9491716/…
如果您自己想出了答案，我们鼓励您自己发布您的答案并接受它或在标题中标记问题SOLVED。欢迎来到 SO!。

标签： javascript css less mixins guard

【解决方案1】：

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

来自changelog：

1.2.0
Mixin guards

【讨论】：