将样式复制到 SCSS 中的其他类，无需@extend

Question

我正在尝试在我的 SCSS 文件中创建一个帮助程序 mixin，以便轻松设置表单输入占位符文本的样式。有一段时间，我只需要改变文本的颜色，所以我有这个混合：

@mixin input-placeholder($color, $opacity, $focusColor: null, $focusOpacity: null) {
    &:-moz-placeholder {
        color: $color;
        opacity: $opacity;
    }
    &::-moz-placeholder {
        color: $color;
        opacity: $opacity;
    }
    &:-ms-input-placeholder {
        color: $color;
        opacity: $opacity;
    }
    &::-webkit-input-placeholder {
        color: $color;
        opacity: $opacity;
    }
    &:placeholder {
        color: $color;
        opacity: $opacity;
    }
    &:invalid {
        color: $color;
    }
    &:focus {
        @if($focusColor==null) {
            $focusColor: transparent;
        }
        @if($focusOpacity==null) {
            $focusOpacity: 0;
        }
        &::-webkit-input-placeholder {
            color: $focusColor !important;
            opacity: $focusOpacity !important;
        }
        &:-moz-placeholder {
            color: $focusColor !important;
            opacity: $focusOpacity !important;
        }
        &::-moz-placeholder {
            color: $focusColor !important;
            opacity: $focusOpacity !important;
        }
        &:-ms-input-placeholder {
            color: $focusColor !important;
            opacity: $focusOpacity !important;
        }
        &::-webkit-input-placeholder {
            color: $focusColor !important;
            opacity: $focusOpacity !important;
        }
        &:placeholder {
            color: $focusColor !important;
            opacity: $focusOpacity !important;
        }
    }
}

这故意单独添加每个选择器，而不是在逗号分隔的列表中，因为如果一个无效，某些浏览器将忽略整个条目。

我想使用@extend这样我就可以创建一个这样的mixin：

@mixin style-input-placeholder($module) {
    &:-moz-placeholder {
        @extend #{$module};
    }
    &::-moz-placeholder {
        @extend #{$module};
    }
    &:-ms-input-placeholder {
        @extend #{$module};
    }
    &::-webkit-input-placeholder {
        @extend #{$module};
    }
    &:placeholder {
        @extend #{$module};
    }
    &:invalid {
        @extend #{$module};
    }
}

其中$module是我传递给mixin以扩展样式的选择器，我可以像这样使用它：

.some-special-placeholder-styles {
    color: purple;
    opacity: 0;
    text-transform: uppercase;
    font-family: 'Open Sans', Arial, sans-serif;
}
input {
    @include style-input-placeholder('.some-special-placeholder-styles');
}

它允许我修改的不仅仅是颜色和不透明度，而不必烦人地将每个属性指定为 mixin 参数。但由于@extend的性质，它将所有这些选择器组合到一个逗号分隔的列表中。那么，我还能做些什么或您遇到的任何解决方法吗？

Answer 1

您可以使用@content指令在mixins中传递任意内容（已添加到sass 3.2中）。因此，您的代码可能如下所示：

@mixin style-input-placeholder() {
    &:-moz-placeholder {
        @content;
    }
    &::-moz-placeholder {
        @content;
    }
    &:-ms-input-placeholder {
        @content;
    }
    &::-webkit-input-placeholder {
        @content;
    }
    &:placeholder {
        @content;
    }
    &:invalid {
        @content;
    }
}
input {
    @include style-input-placeholder() {
        color: purple;
        opacity: 0;
        text-transform: uppercase;
        font-family: 'Open Sans', Arial, sans-serif;
    }
}

您也可以尝试将sass编译与PostCSS连接起来，并使用出色的Autoprefixer插件，这将使您免于定义所有这些特定于供应商的前缀。