Question

我试图弄清楚它是否可以组合mixin选择器字符串。我不相信这在我的代码中是可行的，但我很可能会错过一些东西！

我们说我有以下scss：

// Apply a set of rules to input form fields.
@mixin input-form-fields {
    input:not([type="hidden"]),
    textarea {
        @content;
    }
}

// Apply a set of rules to button form fields.
@mixin button-form-fields {
    button, button {
        @content;
    }
}

// Apply a set of rules to select form fields.
@mixin select-form-fields {
    select {
        @content;
    }
}

// Apply a set of rules to all form fields.
@mixin all-form-fields {
    @include input-form-fields {
        @content;
    }
    @include button-form-fields {
        @content;
    }
    @include select-form-fields {
        @content;
    }
}

基本上，全格式字段mixin将调用其他mixin，从而为不同的选择器生成相同的规则集。

如果我编译以下代码：

@include all-form-fields {
    margin-bottom: .5em;
}

我会得到类似的东西：

input:not([type="hidden"]),
textarea {
  margin-bottom: .5em;
}

button, 
.button {
  margin-bottom: .5em;
}

select {
  margin-bottom: .5em;
}

这不理想，如果我能把这些选择器结合起来，我会很喜欢它。

有没有人对如何组合3种不同mixin返回的选择器字符串有任何想法？

Answer 1

如果您不介意将选择器存储在字符串中，可以使用变量定义不同的字段类型：

$input-form-fields: "input:not([type=hidden]), textarea";
$button-form-fields: "button";
$select-form-fields: "select";

然后用你这样的插值字符串定义你的mixins：

// Apply a set of rules to input form fields.
@mixin input-form-fields {
    #{$input-form-fields} {
        @content;
    }
}

// Apply a set of rules to button form fields.
@mixin button-form-fields {
    #{$button-form-fields} {
        @content;
    }
}

// Apply a set of rules to select form fields.
@mixin select-form-fields {
    #{$select-form-fields} {
        @content;
    }
}

// Apply a set of rules to all form fields.
@mixin all-form-fields {
    #{$input-form-fields}, 
    #{$button-form-fields}, 
    #{$select-form-fields} {
        @content;
    }
}

因此，@include all-form-fields将导致

input:not([type=hidden]), textarea,
button,
select {
  margin-bottom: .5em; }

结合Sass mixin选择器

1 个答案: