如何為佔位符建立 SASS mixin 以無錯誤地處理靜態 CSS？-css教學-PHP中文網

如何為佔位符建立 SASS mixin 以無錯誤地處理靜態 CSS？

Barbara Streisand

發布： 2024-10-26 14:12:31

原創

387 人瀏覽過

How to create a SASS mixin for placeholders that handles static CSS without errors?

SCSS/CSS 中的佔位符Mixin

問題：

問題：

答案：

要在佔位符混合中實現靜態 CSS 的無縫傳遞，我們可以利用 @content 指令。

<code class="scss">@mixin placeholder {
  ::-webkit-input-placeholder {@content}
  :-moz-placeholder           {@content}
  ::-moz-placeholder          {@content}
  :-ms-input-placeholder      {@content}  
}</code>

登入後複製

更新的Mixin：

<code class="scss">@include placeholder {
    font-style:italic;
    color: white;
    font-weight:100;
}</code>

登入後複製

用法：

1🎜>

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

登入後複製

高級🎜及更高版本） :

為了增強靈活性，您可以使用以下mixin 來支援巢狀和非巢狀用法：此mixin 提供了更強大的佔位符方法，可以跨各種CSS 使用選擇器和巢狀元素。

以上是如何為佔位符建立 SASS mixin 以無錯誤地處理靜態 CSS？的詳細內容。更多資訊請關注PHP中文網其他相關文章！