web-dev-qa-db-fra.com

Placeholder Mixin SCSS/CSS

J'essaie de créer un mixin pour les espaces réservés dans sass. 

C'est le mixin que j'ai créé.

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

Voici comment j'aimerais inclure le mixin:

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

Évidemment, cela ne fonctionnera pas à cause de tous les points-virgules et des points-virgules transmis au mixin, mais ... j'aimerais vraiment entrer du css statique et le transmettre exactement comme ci-dessus. 

Est-ce possible? 

csssass
107
Shannon Hochkins

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

La référence SASS contient plus d'informations, que vous pouvez trouver ici: http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#mixin-content

A partir de Sass 3.4, ce mixin peut s’écrire de manière à fonctionner à la fois imbriqué et non imbriqué:

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

J'ai trouvé l'approche proposée par cimmanon et Kurt Mueller a presque fonctionné, mais il me fallait une référence parent (c'est-à-dire, je dois ajouter 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, les fichiers CSS corrects sont générés, 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. cela ressemble à ceci:

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

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
9
igrossiter

Pourquoi pas quelque chose comme ça?

Il utilise une combinaison de listes, d'itérations 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 );
3
Kurt Mueller

Pour éviter les erreurs 'Bloc non clos: CssSyntaxError' émises par les compilateurs sass, ajoutez un ';' à la fin de @content.

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

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

0
Nesha Zoric