」工欲善其事,必先利其器。「—孔子《論語.錄靈公》
首頁 > 程式設計 > 如何使用 @content 和 @at-root 在 SCSS/CSS 中建立佔位符 Mixin?

如何使用 @content 和 @at-root 在 SCSS/CSS 中建立佔位符 Mixin?

發佈於2024-11-19
瀏覽:177

How to Create a Placeholder Mixin in SCSS/CSS Using @content and @at-root?

SCSS/CSS 中的佔位混合

由於傳入的CSS 屬性中存在冒號和分號,您在Sass 中建立佔位混合時遇到問題mixin.

要克服這一挑戰,請在您的mixin:

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

您現在可以包含 mixin,如下所示:

@include placeholder {
    font-style: italic;
    color: white;
    font-weight: 100;
}

此外,Sass 3.4 引入了@at-root 指令,使您能夠以在嵌套和非嵌套上下文中都有效的方式編寫mixin:

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

透過將 @at-root 與 @content 結合使用,您可以確保您的 mixin 在所有情況下都能正常運作。

最新教學 更多>

免責聲明: 提供的所有資源部分來自互聯網,如果有侵犯您的版權或其他權益,請說明詳細緣由並提供版權或權益證明然後發到郵箱:[email protected] 我們會在第一時間內為您處理。

Copyright© 2022 湘ICP备2022001581号-3