CSS WENIGER Platzhalter Mixin

Question

Ich möchte einen Platzhalter Mixin wie folgt erstellen. Dies kann jedoch in der LESS-Version 1.7.0 nicht kompiliert werden.

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

Answer 1

Eingangs Platzhalter Selektoren sind, nicht Eigenschaften, und so ist ihre CSS-Syntax placeholder { ... }, nicht placeholder: ..., die Sie erzeugen wollen.

Wenn Sie beheben, dass:

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

Es kompiliert, und wenn Sie es nennen:

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

es wird diese CSS erzeugen:

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

(ich gerade inbegriffen border: als Beispiel für eine generische CSS-Eigenschaft, unabhängig von der tatsächlichen Auswirkung auf ein Eingabeobjekt.

Answer 2

Ihnen fehlen die geschweiften Klammern um die Platzhalterselektoren.

Die Stile sollte wie folgt lauten:

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

Answer 3

Mixin ermöglicht Platzhalter-CSS-Regeln.

.placeholder(@rules) { 

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

Beispiel Nutzung:

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