由於傳入的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中文網其他相關文章!