Question

我有这个SASS代码段，可以使用node-sass进行编译：

.form-control-dark {
  color: #FFFFFF;
  background-color: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.15);

  &::placeholder, 
  &:-ms-input-placeholder, 
  &::-ms-input-placeholder
  {
    color: darken(white, 15%);
    opacity: 1;
  }

  &:focus {
    border-color: transparent;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.25);
  }
}

我希望将三个“逗号”元素编译为：

.form-control-dark {
  color:#fff;
  background-color:hsla(0,0%,100%,.15);
  border-color:hsla(0,0%,100%,.15)
}
.form-control-dark::-webkit-input-placeholder { 
  color:#d9d9d9;opacity:1 }
.form-control-dark::placeholder {
  color:#d9d9d9;opacity:1 }
.form-control-dark:-ms-input-placeholder {
  color:#d9d9d9;opacity:1 }
.form-control-dark::-ms-input-placeholder {
  color:#d9d9d9;opacity:1 }

但是，相反，我得到了：

.form-control-dark {
  color:#fff;
  background-color:hsla(0,0%,100%,.15);
  border-color:hsla(0,0%,100%,.15) }
.form-control-dark:-ms-input-placeholder,.form-control-dark::-ms-input-placeholder { 
  color:#d9d9d9;opacity:1 }
.form-control-dark:-ms-input-placeholder,.form-control-dark::-ms-input-placeholder,.form-control-dark::placeholder {
  color:#d9d9d9;opacity:1 }

谁能告诉我我怎么了？

谢谢。

Answer 1

我认为您的输出是autoprefixer而不是Sass的结果。尝试忽略&::placeholder自动前缀的供应商版本将处理其余的事情：

SCSS

.form-control-dark {
  color: #FFFFFF;
  background-color: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.15);

  // standard only 
  &::placeholder {
    color: darken(white, 15%);
    opacity: 1;
  }

  &:focus {
    border-color: transparent;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.25);
  }
}

已编译+自动添加前缀的CSS

.form-control-dark {
  color: #FFFFFF;
  background-color: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.15);
}
.form-control-dark::-webkit-input-placeholder {
  color: #d9d9d9;
  opacity: 1;
}
.form-control-dark:-ms-input-placeholder {
  color: #d9d9d9;
  opacity: 1;
}
.form-control-dark::-ms-input-placeholder {
  color: #d9d9d9;
  opacity: 1;
}
.form-control-dark::placeholder {
  color: #d9d9d9;
  opacity: 1;
}
.form-control-dark:focus {
  border-color: transparent;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.25);
}

SASS逗号未扩展

1 个答案: