Запятая SASS не расширяется

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);
}