Lesscss Mixins с охраной. Ошибка синтаксиса

Я пишу свой CSS с помощью Lesscss, используя его на стороне клиента (с компилятором 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 {