Placeholder Mixin SCSS / CSS

Estoy intentando crear un mixin para marcadores de posición en sass.

Este es el mixin que he creado.

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

Así es como me gustaría incluir el mixin:

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

Obviamente, esto no va a funcionar debido a todos los dos puntos y comas que se pasan a través de la mezcla, pero … Realmente me gustaría simplemente ingresar CSS estático y pasarlo exactamente como la función anterior.

es posible?

Está buscando la directiva @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; } 

La referencia de SASS tiene más información, que se puede encontrar aquí: http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#mixin-content


A partir de Sass 3.4, este mixin se puede escribir así para trabajar tanto nesteds como sin anidar:

 @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; } 

Salida:

 .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; } 

Encontré que el enfoque dado por cimmanon y Kurt Mueller casi funcionó, pero que necesitaba una referencia de los padres (es decir, tengo que agregar el prefijo ‘&’ a cada prefijo de proveedor); Me gusta esto:

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

Yo uso Mixin de esta manera:

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

Con la referencia principal en su lugar, se genera la CSS correcta, por ejemplo:

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

Sin la referencia principal (&), se inserta un espacio antes del prefijo del proveedor y el procesador CSS ignora la statement; que se ve así:

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

Esto es para la syntax abreviada

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

usarlo como

 input +placeholder color: red 

¿Por qué no algo como esto?

Utiliza una combinación de listas, iteración e interpolación.

 @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 ); 

Para evitar que se generen errores de ‘Bloque no cerrado: CssSyntaxError’ de comstackdores sass, agregue un ‘;’ hasta el final de @content.

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

Utilizo exactamente el mismo marcador de posición sass mixin como escribió NoDirection. Lo encuentro en la colección sass mixins aquí y estoy muy satisfecho con él. Hay un texto que explica una opción de mixins más.