Segnaposto Mixin SCSS/CSS

Question

Sto provando a creare un mixin per segnaposti in sass.

Questo è il mixin che ho creato.

@mixin placeholder ($css) { 
    ::-webkit-input-placeholder {$css} 
    :-moz-placeholder   {$css} 
    ::-moz-placeholder   {$css} 
    :-ms-input-placeholder  {$css} 
} 

questo è come mi piacerebbe includere il mixin:

@include placeholder(font-style:italic; color: white; font-weight:100;); 

Ovviamente questo non è andare a lavorare a causa di tutti i due punti e punti e virgola che viene passata al mixin , ma ... Mi piacerebbe solo inserire il css statico e farlo passare esattamente come la funzione sopra.

È possibile?

Answer 1

Siete alla ricerca di direttiva @content:

@mixin placeholder { 
    ::-webkit-input-placeholder {@content} 
    :-moz-placeholder   {@content} 
    ::-moz-placeholder   {@content} 
    :-ms-input-placeholder  {@content} 
} 

@include placeholder { 
    font-style:italic; 
    color: white; 
    font-weight:100; 
} 

SASS di riferimento ha più informazioni, che può essere trovato qui: http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#mixin-content

---

Dal Sass 3.4, questo può essere mixin scritto in modo tale da funzionare sia annidato che non verificato:

@mixin optional-at-root($sel) { 
    @at-root #{if(not &, $sel, selector-append(&, $sel))} { 
    @content; 
    } 
} 

@mixin placeholder { 
    @include optional-at-root('::-webkit-input-placeholder') { 
    @content; 
    } 

    @include optional-at-root(':-moz-placeholder') { 
    @content; 
    } 

    @include optional-at-root('::-moz-placeholder') { 
    @content; 
    } 

    @include optional-at-root(':-ms-input-placeholder') { 
    @content; 
    } 
} 

Uso:

.foo { 
    @include placeholder { 
    color: green; 
    } 
} 

@include placeholder { 
    color: red; 
} 

uscita:

.foo::-webkit-input-placeholder { 
    color: green; 
} 
.foo:-moz-placeholder { 
    color: green; 
} 
.foo::-moz-placeholder { 
    color: green; 
} 
.foo:-ms-input-placeholder { 
    color: green; 
} 

::-webkit-input-placeholder { 
    color: red; 
} 
:-moz-placeholder { 
    color: red; 
} 
::-moz-placeholder { 
    color: red; 
} 
:-ms-input-placeholder { 
    color: red; 
} 

Answer 2

Perché non qualcosa di simile?

Utilizza una combinazione di elenchi, iterazione e interpolazione.

@mixin placeholder ($rules) { 

    @each $rule in $rules { 
    ::-webkit-input-placeholder, 
    :-moz-placeholder, 
    ::-moz-placeholder, 
    :-ms-input-placeholder { 
     #{nth($rule, 1)}: #{nth($rule, 2)}; 
    } 
    } 
} 

$rules: (('border', '1px solid red'), 
     ('color', 'green')); 

@include placeholder($rules); 

Answer 3

ho trovato l'approccio data dal cimmanon e Kurt Mueller quasi funzionato, ma che avevo bisogno di un genitore di riferimento (vale a dire, ho bisogno di aggiungere la '&' prefisso per ogni prefisso fornitore); in questo modo:

@mixin placeholder { 
    &::-webkit-input-placeholder {@content} 
    &:-moz-placeholder   {@content} 
    &::-moz-placeholder   {@content} 
    &:-ms-input-placeholder  {@content} 
} 

uso il mixin simili:

input { @include placeholder { 
    font-family: $base-font-family; 
    color: red; 
}} 

Con riferimento principale in posizione, quindi corretta css viene generato, ad esempio:

input::-webkit-input-placeholder { 
    font-family: Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif", "Liberation Serif", Georgia, serif; 
    color: red; } 

Senza il riferimento principale (&), quindi uno spazio viene inserito prima del prefisso del produttore e il processore CSS ignora la dichiarazione; che assomiglia a questo:

input ::-webkit-input-placeholder { 
    font-family: Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif", "Liberation Serif", Georgia, serif; 
    color: red; } 

Answer 4

Questo è per la sintassi abbreviata

=placeholder 
    &::-webkit-input-placeholder 
    @content 
    &:-moz-placeholder 
    @content 
    &::-moz-placeholder 
    @content 
    &:-ms-input-placeholder 
    @content 

utilizzarlo come

input 
    +placeholder 
    color: red 

Answer 5

Per evitare 'blocco Unclosed: CssSyntaxError' errori gettati dai compilatori Sass aggiungere un ';' alla fine di @content.

@mixin placeholder { 
    ::-webkit-input-placeholder { @content;} 
    :-moz-placeholder   { @content;} 
    ::-moz-placeholder   { @content;} 
    :-ms-input-placeholder  { @content;} 
}