Question

我有一个ReactJS应用程序，使用SASS为文本输入中的占位符值设置CSS样式。下面的代码没有问题（我已经为其他浏览器供应商省略了样式，所以我只展示webkit）：

*::-webkit-input-placeholder {
    color: rgb(126, 126, 126);
    transition: color .25s linear;
}

input:focus::-webkit-input-placeholder {
    color: rgb(187, 187, 187);
}

... others emitted for brevity ...

但是因为我对其他浏览器供应商有相同的风格，即*:-moz-placeholder，*::placeholder等，我想使用@extend指令来保持我的代码DRY。 但是，以下代码不起作用：

%shared-placeholder {
    color: rgb(126, 126, 126);
    transition: color .25s linear;
}

%shared-placeholder-focus {
    color: rgb(187, 187, 187);
}

*::-webkit-input-placeholder {
    @extend %shared-placeholder;
}

input:focus::-webkit-input-placeholder {
    @extend %shared-placeholder-focus;
}

... others emitted for brevity ...

没有编译错误，我在我的应用程序的其他地方使用@extend指令没有问题，它似乎不适用于占位符输入。我不明白为什么，因为我假设SASS编译器只是用实际样式替换@extend指令。编辑：结果证明我的假设是错误的，请参阅下面的答案，了解SASS如何将@extend指令编译为css。

Answer 1

You need to understand首先@extend做什么。扩展所有规则的组。如果你想保持你的代码DRYed，这很好，也许你可以做一些@mixin到@include所需的属性。

@mixin shared-placeholder($isFocus) {
  @if ($isFocus) {
    color: rgb(187, 187, 187);
  }@else{
    color: rgb(126, 126, 126);
    transition: color .25s linear;
  }
}


$vendors: (':-webkit','-moz',':-moz','-ms');

@each $vendor in $vendors{
  input:#{$vendor}-input-placeholder{
    @include shared-placeholder(false);
  }
  input:focus:#{$vendor}-input-placeholder{
    @include shared-placeholder(true);
  }
}

Answer 2

我发现了这个问题。编译完成后，我看了一下main.css文件，看到了以下代码：

.root *::-webkit-input-placeholder, 
.root *:-moz-placeholder, 
.root *::-moz-placeholder, 
.root *:-ms-input-placeholder, 
.root *::-ms-input-placeholder, 
.root *::placeholder {
    color: #7e7e7e;
    transition: color 0.25s linear; 
}

问题在于，使用这些伪选择器，它们无法分组。他们的规则集必须是分开的，即使每个选择器完全相同。所以这是SASS编译器的“问题”，如a group of selectors that contain an invalid one is invalid。

换句话说，截至本回答时，您不能将@extend指令与这些特定选择器一起使用。

SASS @extend指令不使用输入占位符

2 个答案: