如何在scss中设置数据占位符属性的样式？

Question

我正在尝试在SCSS中设置数据占位符的样式。坦率地说，我想将数据占位符的颜色从现有颜色更改为暗灰色。但是，我没有成功执行该操作

附上我的HTML5代码。

<optic-select-input id="placeholder" class = "dataplaceholder" data- 
 placeholder="Choose or type subject..."  title = "Type your subject"ng- 
 model="newMessage.Subject" data-maxlength="50"  spellcheck="true">

附件是我的SCSS代码。

    .dataplaceholder{
       @include placeholder(#A9A9A9,"");
         }


@mixin placeholder($color, $size:"") {
  &:-data-placeholder{
  color:$color !important;
  @if $size != "" {
  font-size: $size;
   }
   } 
   }

任何帮助都将受到高度赞赏。

Answer 1

添加[数据占位符]等方括号。

@mixin placeholder($color, $size:"") {
  &[data-placeholder] {
     color:$color !important;

    @if $size != "" {
      font-size: $size;
     }
  } 
}

.dataplaceholder{
  @include placeholder(#A9A9A9,"");
}