如何在 SCSS/CSS 中建立使用冒號和分號的佔位混合？-css教學-PHP中文網

如何在 SCSS/CSS 中建立使用冒號和分號的佔位混合？

DDD

發布： 2024-10-27 04:02:02

原創

743 人瀏覽過

How to Create a Placeholder Mixin in SCSS/CSS that Works With Colons and Semicolons?

SCSS/CSS 中的佔位符混合

您正在尋求為 Sass 中的佔位符建立一個 mixin。您設計的 mixin 由於在提供的 CSS 中包含冒號和分號而遇到問題。

幸運的是，Sass 透過 @content 指令提供了解決方案。透過在 mixin 中使用 @content，您可以直接傳遞靜態 CSS，如下所示：

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

登入後複製

有關更多詳細信息，請參閱 Sass 參考：
http://sass-lang。 com/docs/yardoc/file.SASS_REFERENCE.html#mixin-content

Sass 3.4 及更高版本

在Sass 3.4 及更高版本中，您可以及更高版本中，您可以及更高版本中，您可以及更高版本中，您可以及更高版本中，您可以及更高版本中，您可以及更高版本中，您可以及更高版本中，您可以及更高版本中，您可以及更高版本中，您可以及更高版本中，您可以以上版本使用@可選- at-root mixin 以確保嵌套和非嵌套場景中的功能：

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

登入後複製

使用和輸出

.foo {
  @include placeholder {
    color: green;
  }
}

@include placeholder {
  color: red;
}

登入後複製

這將輸出：

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

登入後複製

以上是如何在 SCSS/CSS 中建立使用冒號和分號的佔位混合？的詳細內容。更多資訊請關注PHP中文網其他相關文章！