占位符的 CSS - 强制 SASS 将每个选择器呈现为单独的 CSS 块

Question

我正在为 <input> 标签中的占位符文本设置样式，但我发现了一些奇怪的行为。

如果我简单地输入以下内容，Chrome 会正确呈现占位符文本：

:focus::-webkit-input-placeholder {
  position: absolute;
  left: -9000px;
}

但是，如果我尝试在同一行中包含多个浏览器，它根本不会显示：

:focus::-webkit-input-placeholder, :focus:-moz-placeholder, :focus::-moz-placeholder, :focus:-ms-input-placeholder {
    position: absolute;
    left: -9000px; 
}

理想情况下，我希望我的 SASS 如下所示，但无论出于何种原因，我都不能使用逗号分隔不同的选择器。

:focus {
  outline: none;
  &::-webkit-input-placeholder, &:-moz-placeholder, &::-moz-placeholder, &:-ms-input-placeholder {
      // Hide placeholder text on focus
      position: absolute;
      left: -9000px;
  }
}

是否有任何 SASS 语法强制它使用自己的块处理每个选择器，如下例所示？

:focus::-webkit-input-placeholder {
    position: absolute;
    left: -9000px;
}

:focus:-moz-placeholder {
    position: absolute;
    left: -9000px;
}

// etc.

Answer 1

您可以轻松地创建一个 mixin 并通过传递给 mixin 本身的内容块一次定义所有占位符的样式，如下所示：

@mixin placeholder {

    @each $placeholder
        in "::-webkit-input-placeholder",
           ":-moz-placeholder",
           "::-moz-placeholder", 
           ":-ms-input-placeholder" {

        /* for each placeholder in the above list print the browser vendor
           selector, chained with its parent element */

        &#{$placeholder} {
            /* content is replaced with the actual style, passed as a block
               in the mixin inclusion below */

            @content;
        }
    }

}


:focus {
    @include placeholder {
        color: #ccc;
        font-style: italic;
    }
}

这将产生以下输出

:focus::-webkit-input-placeholder {
    color: #ccc;
    font-style: italic;
}
:focus:-moz-placeholder {
    color: #ccc;
    font-style: italic;
}
:focus::-moz-placeholder {
    color: #ccc;
    font-style: italic;
}
:focus:-ms-input-placeholder {
    color: #ccc;
    font-style: italic;
}

你可以在http://sassmeister.com/上测试sass代码