Question

我在客户端使用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;}
}

代码是由文档编写的。但它不起作用。当我执行此代码时，我有语法错误：

Syntax Error on line 10
[link to my file] on line 10, column 58:
10    // Mixins with guards
11    .applyHeaderStyles(@headerWidth, @buttonsWidth) when (ispixel(@headerWidth)) {
12        .my-headerElement {

Answer 1

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

来自changelog：

1.2.0
Mixin guards

Lesscss Mixins与警卫。语法错误

1 个答案: