css - SASS @extend 指令不适用于输入占位符

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 指令使我的代码保持干爽。 但是，下面的代码不起作用:

%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 首先做什么。扩展组的所有规则。如果你想让你的代码保持干燥，这很好，也许你可以做一些 @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);
  }
}