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

由于some browsers will ignore the entire entry if one is invalid的事实，这有意将每个选择器单独添加而不是以逗号分隔的列表。

我想使用@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;
    }
}

此外，您可以尝试使用PostCSS连接您的sass编译，并使用优秀的Autoprefixer插件，这将使您无法定义所有这些特定于供应商的前缀。

在不使用@extend的情况下将样式复制到SCSS中的其他类？

1 个答案: