Question

我尝试将所有特定于供应商的内容分组到这样的占位符选择器中：

%search-bar-placeholder {
    color: red;
}

.search-bar::-webkit-input-placeholder {
    @extend %search-bar-placeholder;
}

.search-bar:-moz-placeholder {
    @extend %search-bar-placeholder;
}

.search-bar::-moz-placeholder {
    @extend %search-bar-placeholder;
}

.search-bar:-ms-input-placeholder {  
    @extend %search-bar-placeholder;
}

然后它编译成这个：

.search-bar::-webkit-input-placeholder, .search-bar:-moz-placeholder, .search-bar::-moz-placeholder, .search-bar:-ms-input-placeholder {
  color: red; }

如何确保Sass不会将所有选择器放在一起？像这样：

.search-bar::-webkit-input-placeholder {
    color: red;
}

.search-bar:-moz-placeholder {
    color: red;
}

.search-bar::-moz-placeholder {
    color: red;
}

.search-bar:-ms-input-placeholder {  
    color: red;
}

Answer 1

在sass-lang.com上查看Extend/Inheritance时，似乎选择器始终以逗号分隔。即使您添加了另一个属性，它也会将共享属性保留在逗号分隔列表中，并为该被覆盖的值添加另一个选择器。

我实现你想要的方式就是使用mixin。虽然它不是mixin的目的，但它确实完成了工作。您的风格仍然是集中的，您也可以使用一个衬垫在每个选择器中打印出来。

@mixin placeholder-properties() {
  color: red;
  font-weight: bold;
}

.search-bar::-webkit-input-placeholder {
   @include placeholder-properties();
}

.search-bar:-moz-placeholder {
  @include placeholder-properties();
}

.search-bar::-moz-placeholder {
  @include placeholder-properties();
}

.search-bar:-ms-input-placeholder {  
  @include placeholder-properties();
}

结果将如下。

.search-bar::-webkit-input-placeholder {
  color: red;
  font-weight: bold;
}

.search-bar:-moz-placeholder {
  color: red;
  font-weight: bold;
}

.search-bar::-moz-placeholder {
  color: red;
  font-weight: bold;
}

.search-bar:-ms-input-placeholder {
  color: red;
  font-weight: bold;
}

这是fiddle。

防止多个选择器的组合

1 个答案: