如何在 SCSS/CSS 中使用 Mixin 设置占位符文本样式？-css教程-PHP中文网

如何在 SCSS/CSS 中使用 Mixin 设置占位符文本样式？

Susan Sarandon

发布： 2024-10-26 13:34:30

原创

1024 人浏览过

How to Style Placeholder Text using a Mixin in SCSS/CSS?

SCSS/CSS 中的占位符混合

挑战：
创建一个 mixin 以使用静态样式设置占位符文本Sass 中的 CSS。

Mixin 尝试：

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

登录后复制

问题：
由于传递了冒号和分号，mixin 不起作用通过 $css 参数，干扰浏览器特定的占位符选择器。

解决方案：使用 @content 指令
引入 @content 指令以在 mixin 中包含静态 CSS，而不会破坏占位符选择器。

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

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

登录后复制

这允许您将占位符混合嵌套在其他选择器中，同时仍然针对占位符元素。

以上是如何在 SCSS/CSS 中使用 Mixin 设置占位符文本样式？的详细内容。更多信息请关注PHP中文网其他相关文章！