DRY псевдо-префиксы и префиксы поставщиков

Есть ли способ сделать этот код СУХИМ? Я использую препроцессор (SASS). Я думал об использовании микширования, но не знаю, как это сделать, поскольку все селекторы имеют префикс поставщика для заполнителя.

    input:focus::-webkit-input-placeholder {
    -webkit-transition-property: color;
    -webkit-transition-timing-function: ease-in-out;
    -webkit-transition-duration: 1s;
    color: transparent;
    }

    input:focus:-moz-placeholder {
    -moz-transition-property: color;
    -moz-transition-timing-function: ease-in-out;
    -moz-transition-duration: 1s;
    color: transparent;
    }

    input:focus::-moz-placeholder {
    -moz-transition-property: color;
    -moz-transition-timing-function: ease-in-out;
    -moz-transition-duration: 1s;
    color: transparent;
    }

    input:focus:-ms-input-placeholder {
    transition-property: color;
    transition-timing-function: ease-in-out;
    transition-duration: 1s;
    color: transparent;
    }

    input:focus:input-placeholder {
    transition-property: color;
    transition-timing-function: ease-in-out;
    transition-duration: 1s;
    color: transparent;
    }

css sass dry vendor-prefix
person Sukhy    schedule 08.06.2016    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Стилус для ввода-заполнителя Mixin

В вашем файле стилуса

placeholder()
    &::-webkit-input-placeholder
        {block}
    &:-moz-placeholder
        {block}
    &::-moz-placeholder
        {block}
    &:-ms-input-placeholder
        {block}

место, где он используется

.name
      input
            +placeholder()
                color #fff

Желаемый результат

.name input::-webkit-input-placeholder {
    color: #fff;
}

.name input:-moz-placeholder {
    color: #fff;
}

.name input::-moz-placeholder {
    color: #fff;
}

.name input:-ms-input-placeholder {
    color: #fff;
}
person Dhwani sanghvi    schedule 09.06.2016

arrow_upward
0
arrow_downward

Да, вы можете использовать карты SCSS

$placeholder: (
  '::-webkit-input-': '-webkit-',
  ':-moz-': '-moz-',
  '::-moz-': '-moz-',
  ':-ms-input-': '',
  ':input-': ''
);

input {
  &:focus {
    @each $browser, $value in $placeholder {

      &#{$browser}placeholder {
        #{$value}transition-property: color;
        #{$value}transition-timing-function: ease-in-out;
        #{$value}transition-duration: 1s;
         color: transparent;
      }

    } 
  }
}

Просмотреть мою кодовую ручку

person Mark    schedule 09.06.2016