Marcador de posición Mixin SCSS / CSS

Estoy tratando de 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 puntos y semicolones que se está pasando a través de la mixin, pero... Realmente me gustaría simplemente ingresar css estático y pasarlo exactamente como la función anterior.

Es esto posible?

 103
csssass
Author: Shannon Hochkins, 2013-06-19
Source

6 answers

Estás 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;
}

SASS Reference 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 anidado como no anidado:

@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;
}
 211
Author: cimmanon,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-10-24 15:24:46

Encontré que el enfoque dado por cimmanon y Kurt Mueller casi funcionó, pero que necesitaba una referencia padre (es decir, necesito agregar el prefijo '&' a cada prefijo de proveedor); así: 

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

Uso el mixin de esta manera: 

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

Con la referencia padre en su lugar, entonces se genera css correcto, 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; }
 152
Author: Dave Hein,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-05-23 12:10:33

Esto es para la sintaxis abreviada

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

Úsalo como

input
  +placeholder
    color: red
 9
Author: igrossiter,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-02-23 18:21:15

¿Por qué no algo así?

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 );
 3
Author: Kurt Mueller,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-06-19 02:28:07

Para evitar que los errores 'Unclosed block: CssSyntaxError' sean lanzados desde compiladores sass agregue un ';' al final de @content.

@mixin placeholder {
   ::-webkit-input-placeholder { @content;}
   :-moz-placeholder           { @content;}
   ::-moz-placeholder          { @content;}
   :-ms-input-placeholder      { @content;}
}
 3
Author: NoDirection,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-06-09 10:35:25

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

 0
Author: Nesha Zoric,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-03-23 14:40:05