如何在 SCSS/CSS 中建立一個有效的佔位符混合來處理巢狀和非巢狀選擇器？

SCSS/CSS 中的佔位符Mixin

為佔位符創建時，像下面這樣的簡單mixin 可能不夠，因為傳遞給它的冒號和分號的數量：

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

使用@content指令

將靜態CSS傳遞給mixin，就像如果需要，可以使用@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>

更多資訊可以在 SASS 參考中找到，網址為 https://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#mixin-content。

可選的@-root Mixin（Sass 3.4 及更高版本）

在Sass 3.4 及更高版本中，可選的根mixin 可用於有效處理嵌套和非嵌套選擇器：

<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>

用法：

<code class="scss">.foo {
  @include placeholder {
    color: green;
  }
}

@include placeholder {
  color: red;
}</code>

輸出：

<code class="css">.foo::-webkit-input-placeholder {
  color: green;
}
.foo:-moz-placeholder {
  color: green;
}
.foo::-moz-placeholder {
  color: green;
}
.foo:-ms-input-placeholder {
  color: green;
}

::-webkit-input-placeholder {
  color: red;
}
:-moz-placeholder {
  color: red;
}
::-moz-placeholder {
  color: red;
}
:-ms-input-placeholder {
  color: red;
}</code>

以上是如何在 SCSS/CSS 中建立一個有效的佔位符混合來處理巢狀和非巢狀選擇器？的詳細內容。更多資訊請關注PHP中文網其他相關文章！