组合Sass混合素选择器
组合Sass混合素选择器
提问于 2013-08-13 16:34:24
我试图找出是否有可能组合混合选择器字符串。我不相信这在我的代码上下文中是可能的，但是我很可能遗漏了一些东西！
假设我有以下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;
}
}基本上，所有形式的字段混合将调用其他混合，从而为不同的选择器生成相同的规则集。
如果我编译了以下代码：
@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种不同的混合器返回的选择器字符串有任何想法吗？
回答 1
Stack Overflow用户
回答已采纳
发布于 2013-08-13 16:47:19
如果不介意将选择器存储在字符串中，则可以使用变量定义不同的字段类型：
$input-form-fields: "input:not([type=hidden]), textarea";
$button-form-fields: "button";
$select-form-fields: "select";然后使用插值字符串定义混合器，如下所示：
// 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; }页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/18214512
复制相关文章
相似问题
腾讯云开发者
