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

我正在设置我的

标记中的占位符文本的样式，我发现了一些奇怪的行为

如果我简单地说一下，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.

---

通过传递给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;
}

---

您可以在

上测试sass代码，原因如下：谢谢，我认为原因与此类似。这就是为什么我在寻找一种时髦的方式。可能是重复的