css3 - 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;
    }

最佳答案

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

关于css3 - DRY伪和供应商前缀，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/37711072/