SASS中的链接选择器[重复]答案

【问题标题】：Chaining selectors in SASS [duplicate]SASS中的链接选择器[重复]
【发布时间】：2014-07-16 12:52:23
【问题描述】：

在 sass 中有没有办法像这样链接选择器：

input {
    &::-webkit-input-placeholder,
    &:-moz-placeholder,
    &::-moz-placeholder,
    &:-ms-input-placeholder {
        color: red;
    }
}

【问题讨论】：

这应该可以正常工作。你试过发现它不起作用吗？
是的，它不起作用。
那么要么有其他问题，要么问题不清楚。在这里运行SASS，输出是input::-webkit-input-placeholder, input:-moz-placeholder, input::-moz-placeholder, input:-ms-input-placeholder { color: red; }，正如我所料。如果您期待else，请在问题中包含示例输出。
@panthro：语法正确，但输出的选择器无效。逗号分隔 ::placeholder 伪元素不起作用（因为当浏览器不理解选择器时（在这种情况下是因为前缀），它将使整个规则集无效）。见：stackoverflow.com/questions/16982449/…
其实这个比较相关：stackoverflow.com/questions/16982449/…

标签： css sass

【解决方案1】：

使用这些特殊的特定于供应商的伪选择器，我发现将它们全部放在一行中并不能使它们在跨浏览器上工作得很好。我认为您可以期望的最佳优化是这样的：

@mixin placeholderstyle() {
  color: red;
}
input::-webkit-input-placeholder {
  @include placeholderstyle()
}
input:-moz-placeholder {
  @include placeholderstyle()
}
input::-moz-placeholder {
  @include placeholderstyle()
}
input:-ms-input-placeholder {
  @include placeholderstyle()
}

【讨论】：