DRY伪和供应商前缀

Question

有没有办法可以让这段代码干掉？我正在使用预处理器（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;
    }

Answer 1

手写笔输入占位符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;
}

Answer 2

是的，您可以使用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;
      }

    } 
  }
}

View my codepen