FARCER / Start-template-gulp-4-pug-sass

100 stars 53 forks source link

Placeholder Mixin doesn't work #13

Closed Zobakka closed 4 years ago

Zobakka commented 5 years ago

Миксин Placeholder в файле /dev/static/styles/utils/mixins.scss не работает.

Код Миксина:

@mixin placeholder {
  ::-webkit-input-placeholder {@content}
  :-moz-placeholder           {@content}
  ::-moz-placeholder          {@content}
  :-ms-input-placeholder      {@content}
}

SCSS:

input {
 @include placeholder {
        color: red;
    }
}

CSS:

input ::-webkit-input-placeholder { color: red; }
input :-moz-placeholder { color: red; }
input ::-moz-placeholder { color: red; }
input :-ms-input-placeholder { color: red; }

И из-за пробела после input код получается не рабочим, хоть валидаторы и не ругаются..

Но если не использовать миксин и воспользоваться псевдоэлементом ::placeholder, то при компиляции автопрефиксер заменит все, как надо:

SCSS:

input {
 &::placeholder{
        color: red;
    }
}

CSS:

input::-webkit-input-placeholder { color: red; }
input::-moz-placeholder { color: red; }
input:-ms-input-placeholder { color: red; }
input::-ms-input-placeholder { color: red; }
input::placeholder { color: red; }

MDN

FARCER commented 4 years ago

Почищу в следующем апдейте