Combining Sass mixin selectors [duplicate] - sass

Question

This question already has answers here:
Styling a specific set of input types in a reusable way with Sass
(2 answers)
Closed 7 years ago.
I'm trying to figure out if it's at all possible to combine mixin selector strings. I don't believe this is possible in the context of my code, but I could very well be missing something!
Let's say I have the following 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;
}
}
Basically the all-form-fields mixin will call other mixins, thus generating the same set of rules for different selectors.
If I compile the following code:
#include all-form-fields {
margin-bottom: .5em;
}
I would get something like:
input:not([type="hidden"]),
textarea {
margin-bottom: .5em;
}
button,
.button {
margin-bottom: .5em;
}
select {
margin-bottom: .5em;
}
This is not ideal, I would love it if I could combine those selectors.
Does anyone have any ideas on how I could possibly combine the selector strings returned by the 3 different mixins?

Answer 1

If you don't mind storing your selectors in strings, you could define different field types using variables:
$input-form-fields: "input:not([type=hidden]), textarea";
$button-form-fields: "button";
$select-form-fields: "select";
Your then define your mixins with interpolated strings like so:
// 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;
}
}
As a result, #include all-form-fields will result in
input:not([type=hidden]), textarea,
button,
select {
margin-bottom: .5em; }