represent - Placeholder Mixin SCSS/CSS
textarea placeholder css (6)
¿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 );
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?
Encontré que el enfoque dado por 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 declaración; 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; }
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 anidados 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;
}
Esto es para la sintaxis abreviada
=placeholder
&::-webkit-input-placeholder
@content
&:-moz-placeholder
@content
&::-moz-placeholder
@content
&:-ms-input-placeholder
@content
usarlo como
input
+placeholder
color: red
Para evitar que se generen errores de ''Bloque no cerrado: CssSyntaxError'' de compiladores sass, agregue un '';'' hasta el final de @content.
@mixin placeholder {
::-webkit-input-placeholder { @content;}
:-moz-placeholder { @content;}
::-moz-placeholder { @content;}
:-ms-input-placeholder { @content;}
}