Platzhalter Mixin SCSS / CSS

Ich versuche ein Mixin für Platzhalter in Sass zu erstellen.

Dies ist das Mixin, das ich erstellt habe.

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

So möchte ich das Mixin einbinden:

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

Natürlich wird dies nicht funktionieren, da alle Doppelpunkte und Semikolons an das Mixin übergeben werden, aber ... Ich möchte wirklich nur statisches CSS eingeben und es genau wie die obige Funktion durchlaufen.

Ist das möglich?

Sie suchen nach der @contentRichtlinie:

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

Weitere Informationen finden Sie in der SASS-Referenz: http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#mixin-content

Ab Sass 3.4 kann dieses Mixin so geschrieben werden, dass es sowohl verschachtelt als auch nicht verschachtelt funktioniert:

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

Verwendung:

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

@include placeholder {
  color: red;
}

Ausgabe:

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

Ich fand, dass der Ansatz von cimmanon und Kurt Mueller fast funktioniert hat, aber dass ich eine übergeordnete Referenz benötigte (dh ich muss jedem Herstellerpräfix das Präfix '&' hinzufügen); so was:

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

Ich benutze das Mixin so:

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

Wenn die übergeordnete Referenz vorhanden ist, wird das richtige CSS generiert, z.

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

Ohne die übergeordnete Referenz (&) wird vor dem Herstellerpräfix ein Leerzeichen eingefügt, und der CSS-Prozessor ignoriert die Deklaration. das sieht so aus:

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

Dies ist für die Kurzsyntax

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

benutze es wie

input
  +placeholder
    color: red

Warum nicht so etwas?

Es verwendet eine Kombination aus Listen, Iteration und 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 );

Um zu vermeiden, dass 'Unclosed Block: CssSyntaxError'-Fehler von Sass-Compilern ausgelöst werden, fügen Sie ein'; ' bis zum Ende von @content.

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

Ich verwende genau den gleichen Sass-Mixin-Platzhalter wie NoDirection. Ich finde es in sass Mixins Sammlung hier und ich bin damit sehr zufrieden. Es gibt einen Text , der eine Mixins-Option näher erläutert.