Bagaimana untuk Mencipta Mixin Pemegang Tempat dalam SCSS/CSS yang Berfungsi Dengan Titik Bertitik dan Titik Bertitik?-tutorial css-php.cn

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

DDD

Lepaskan： 2024-10-27 04:02:02

asal

743 orang telah melayarinya

How to Create a Placeholder Mixin in SCSS/CSS that Works With Colons and Semicolons?

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

Salin selepas log masuk

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 &amp;, $sel, selector-append(&amp;, $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;
  }
}

Salin selepas log masuk

Penggunaan dan Output

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

@include placeholder {
  color: red;
}

Salin selepas log masuk

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

Salin selepas log masuk

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!