CSS MENO Placeholder Mixin

Question

Voglio creare un mixin segnaposto come segue. Tuttavia, questo non riesce a compilare in LESS versione 1.7.0.

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

Answer 1

segnaposto di input sono selettori, non proprietà, e così la loro sintassi CSS è placeholder { ... }, non placeholder: ... cui si sta tentando di generare.

Se si fissa che:

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

Sarà compilato, e quando lo si chiama:

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

genererà questo CSS:

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

(ho appena incluso border: come esempio di una proprietà CSS generica, indipendente dal suo effetto reale su un oggetto di input)

Answer 2

Mancano le parentesi graffe attorno ai selettori segnaposto.

Gli stili dovrebbero essere le seguenti:

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

Answer 3

Mixin consente qualsiasi regola css segnaposto.

.placeholder(@rules) { 

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

Esempio utilizzo:

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