CSS МЕНЬШЕ

Я хочу создать компоновщик-заполнитель следующим образом. Однако это не скомпилируется в LESS версии 1.7.0.

.placeholder(...) {
    ::-webkit-input-placeholder: @arguments;
    :-moz-placeholder: @arguments;
    ::-moz-placeholder: @arguments;
    :-ms-input-placeholder: @arguments;
}

Ответ 1

Входные заполнители - это селекторы, а не свойства, поэтому их синтаксис CSS placeholder { ... }, а не placeholder: ..., который вы пытаетесь создать.

Если вы исправите это:

.placeholder(...) {
    ::-webkit-input-placeholder {border:@arguments}
    ::-moz-placeholder {border:@arguments}
    :-ms-input-placeholder {border:@arguments}
}

Он будет компилироваться, и когда вы его назовете:

.placeholder(solid; 1px; blue;);

он сгенерирует этот CSS:

::-webkit-input-placeholder {
  border: solid 1px #0000ff;
}
::-moz-placeholder {
  border: solid 1px #0000ff;
}
:-ms-input-placeholder {
  border: solid 1px #0000ff;
}

(я просто включил border: в качестве примера общего свойства CSS, независимо от его фактического эффекта на входной объект)

Ответ 2

Mixin позволяет использовать любые правила css placeholder.

.placeholder(@rules) {

    &::-webkit-input-placeholder {
        @rules();
    }
    &:-moz-placeholder {
        @rules();
    }
    &::-moz-placeholder {
        @rules();
    }
    &:-ms-input-placeholder {
        @rules();
    }
}

Пример использования:

.placeholder({
    color: #0000FF;
    text-transform: uppercase;
});

Ответ 3

Вам не хватает фигурных скобок вокруг селекторов-заполнителей.

Стили должны быть следующими:

.placeholder(@color) {
    ::-webkit-input-placeholder {
        color: @color;
    }
    :-moz-placeholder {
        color: @color;
    }
    ::-moz-placeholder {
      color: @color;
    }
}