如何在 SCSS/CSS 中使用 Mixin 設定佔位符文字樣式？

SCSS/CSS 中的佔位符混合

挑戰：
建立一個🎜>

挑戰：

建立一個🎜>以使用靜態mixin樣式設定佔位符文字Sass 中的CSS。

<code class="scss">@mixin placeholder ($css) {
  ::-webkit-input-placeholder {$css}
  :-moz-placeholder           {$css}
  ::-moz-placeholder          {$css}
  :-ms-input-placeholder      {$css}  
}</code>

Mixin 嘗試：

問題：

由於傳遞了冒號和分號，mixin 不起作用通過$css參數，幹擾瀏覽器特定的佔位選擇器。

解決方案：使用 @content 指令

<code class="scss">@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;
}</code>

引入 @content 指令以在 mixin 中包含靜態 CSS，而不會破壞佔位符選擇器。

<code class="scss">@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;
  }
}</code>

進一步增強：巢狀和非巢狀用法(Sass 3.4 )

這允許您將佔位符混合在其他嵌套選擇器中，同時仍針對佔位符元素。

以上是如何在 SCSS/CSS 中使用 Mixin 設定佔位符文字樣式？的詳細內容。更多資訊請關注PHP中文網其他相關文章！