Bagaimana untuk Mencipta Mixin Pemegang Tempat dalam SCSS/CSS yang Berfungsi Dengan Titik Bertitik dan Titik Bertitik?

Campuran Pemegang Tempat dalam SCSS/CSS

Anda sedang berusaha untuk mencipta campuran untuk pemegang tempat dalam Sass. Campuran yang anda reka bentuk menghadapi masalah kerana kemasukan titik bertindih dan titik bertitik dalam CSS yang disediakan.

Mujurlah, Sass menyediakan penyelesaian melalui arahan @content. Dengan menggunakan @content dalam mixin anda, anda boleh menghantar CSS statik secara langsung, seperti yang ditunjukkan di bawah:

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

Untuk butiran lanjut, rujuk Rujukan Sass di:
http://sass-lang. com/docs/yardoc/file.SASS_REFERENCE.html#mixin-content

Sass 3.4 and Beyond

Dalam Sass 3.4 dan lebih baru, anda boleh menggunakan @optional- at-root mixin untuk memastikan kefungsian dalam kedua-dua senario bersarang dan tidak bersarang:

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

Penggunaan dan Output

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

@include placeholder {
  color: red;
}

Ini akan menghasilkan:

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

Atas ialah kandungan terperinci Bagaimana untuk Mencipta Mixin Pemegang Tempat dalam SCSS/CSS yang Berfungsi Dengan Titik Bertitik dan Titik Bertitik?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!