Lesscss混合与守卫。语法错误 [英] Lesscss Mixins with guards. Syntax Error

问题描述

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

I write my CSS with Lesscss using it on client side (with compiler less.js).

在文档中有很好的例子，为我工作。我不明白，为什么...

There are good examples for guards usage in documentation, but it don't work for me. I can't understand, why...

代码示例如下：

@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;}
}

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

Code was writen by documentation. But it doesn't work. When I execute this code, I have Syntax Error:

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 {

推荐答案

如前所述在这里，更新到less.js 1.2.2解决了这个问题。

As mentioned here, updating to less.js 1.2.2 solves the problem.

从 changelog ：

1.2.0
Mixin guards

这篇关于Lesscss混合与守卫。语法错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！