1

我在客户端使用 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 {
4

1 回答 1

1

正如这里提到的，更新到 less.js 1.2.2 解决了这个问题。

从变更日志：

1.2.0
Mixin guards
于 2012-03-20T15:28:28.223 回答