首頁 > web前端 > css教學 > 如何使用 @content 和 @at-root 在 SCSS/CSS 中建立佔位符 Mixin?

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

Susan Sarandon
發布: 2024-10-26 19:50:02
原創
323 人瀏覽過

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

SCSS/CSS 中的佔位符混合

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

要克服這個挑戰,請在您的mixin 中使用@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>
登入後複製

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

<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>
登入後複製

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

以上是如何使用 @content 和 @at-root 在 SCSS/CSS 中建立佔位符 Mixin?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板