Placeholder Mixin SCSS / CSS

Vous recherchez la directive @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 contient plus d’informations, disponibles à l’ adresse suivante : http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#mixin-content

A partir de Sass 3.4, ce mixin peut être écrit comme ça pour fonctionner à la fois nested et non-nested:

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

Usage:

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

Sortie:

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

J’ai trouvé que l’approche donnée par Cimmanon et Kurt Mueller a presque fonctionné, mais que j’avais besoin d’une référence parente (c’est-à-dire que je devais append le préfixe «&» à chaque préfixe de fournisseur); comme ça:

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

J’utilise le mixin comme ceci:

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

Avec la référence parent en place, le css correct est généré, par exemple:

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

Sans la référence parent (&), un espace est inséré avant le préfixe du fournisseur et le processeur CSS ignore la déclaration. ça ressemble à ça:

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

Ceci est pour la syntaxe abrégée

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

l’utiliser comme

 input +placeholder color: red 

Pourquoi pas quelque chose comme ça?

Il utilise une combinaison de listes, d’itération et d’interpolation.

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

Pour éviter «Bloc non fermé: les erreurs CssSyntaxError» lancées par les compilateurs sass ajoutent un ‘;’ jusqu’à la fin de @content.

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

J’utilise exactement le même espace réservé sass mixin que NoDirection a écrit. Je le trouve dans la collection sass mixins ici et j’en suis très satisfait. Il y a un texte qui explique plus une option mixins.