Scss - Czy taki kod to redundancja?

Question

Witam.

Wiadomo, że przy zastosowaniu np. display: flex preprocesor wytworzy dla tej wartości odpowiednik -webkit, -moz itd.

Stworzyłem sobie takiego mixina dla placeholdera:

@mixin placeholder($color) {
    &::-webkit-input-placeholder {
        color: $color;
    }
    &::-moz-placeholder {
        color: $color;
    }
    &:-ms-input-placeholder {
        color: $color;
    }
    &:-moz-placeholder {
        color: $color;
    }
}

Wszystko ładnie działa, ale czy gdy zamienię to na:

@mixin placeholder($color) {
    &::-webkit-input-placeholder {
        color: $color;
    }
}

to preprocesor sam nie przekształci tego na tą pierwszą wersję? Poszukałem trochę w konsoli i nie mogłem znaleźć osobnych styli dla placeholdera.

Answer 1

Wiadomo, że przy zastosowaniu np. display: flex preprocesor wytworzy dla tej wartości odpowiednik -webkit, -moz itd.

Czemu miałby cokolwiek dodawać?

Narzędzie o którym mówisz to autoprefixer. Z nim wystarczy napisać:

.input::placeholder {
  color: $color;
}

I automatycznie wygeneruje (przy odpowiednich ustawieniach wspierania przeglądarek):

.input::-webkit-input-placeholder {
  color: $color;
}
.input::-moz-placeholder {
  color: $color;
}
.input:-ms-input-placeholder {
  color: $color;
}
.input::-ms-input-placeholder {
  color: $color;
}
.input::placeholder {
  color: $color;
}

Można sobie tak skonfigurować środowisko, że podane przez Ciebie mixiny w ogóle nie będą potrzebne