如何使用 @content 和 @at-root 在 SCSS/CSS 中创建占位符 Mixin？

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中文网其他相关文章！