Placeholder Mixin SCSS / CSS

Saya mencoba membuat mixin untuk placeholder di sass.

Ini adalah mixin yang saya buat.

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

Ini adalah bagaimana saya ingin memasukkan mixin:

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

Jelas ini tidak akan berhasil karena semua titik dua dan titik koma yang diteruskan ke mixin, tapi ... Saya benar-benar ingin memasukkan css statis dan meneruskannya persis seperti fungsi di atas.

Apakah ini mungkin?

Anda mencari @contentarahan:

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

Referensi SASS memiliki informasi lebih lanjut, yang dapat ditemukan di sini: http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#mixin-content

Mulai Sass 3.4, mixin ini dapat ditulis seperti itu agar berfungsi baik bersarang maupun tidak:

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

Pemakaian:

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

@include placeholder {
  color: red;
}

Keluaran:

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

Saya menemukan pendekatan yang diberikan oleh cimmanon dan Kurt Mueller hampir berhasil, tetapi saya membutuhkan referensi orang tua (yaitu, saya perlu menambahkan awalan '&' ke setiap awalan vendor); seperti ini:

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

Saya menggunakan mixin seperti ini:

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

Dengan referensi induk di tempat, maka css yang benar akan dihasilkan, misalnya:

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

Tanpa referensi induk (&), maka spasi disisipkan sebelum awalan vendor dan prosesor CSS mengabaikan deklarasi tersebut; yang terlihat seperti ini:

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

Ini untuk sintaks singkat

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

gunakan seperti itu

input
  +placeholder
    color: red

Kenapa tidak seperti ini?

Ini menggunakan kombinasi daftar, iterasi, dan interpolasi.

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

Untuk menghindari kesalahan 'Blok tidak tertutup: CssSyntaxError' dilempar dari kompiler sass, tambahkan ';' ke akhir @content.

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

Saya menggunakan placeholder mixin sass yang sama persis seperti yang ditulis NoDirection. Saya menemukannya dalam koleksi sass mixins di sini dan saya sangat puas dengannya. Ada teks yang lebih menjelaskan opsi mixin.