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?
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;
}
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; }
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é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 );
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;}
}