【问题标题】：DRY pseudo and vendor prefixesDRY 伪前缀和供应商前缀
【发布时间】：2016-06-08 19:17:35
【问题描述】：

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

【解决方案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;
}

【讨论】：

【解决方案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

【讨论】：