Combining Sass mixin selectors -

this question has answer here:

• styling specific set of input types in reusable way sass 2 answers

i'm trying figure out if it's @ possible combine mixin selector strings. don't believe possible in context of code, missing something!

let's have following scss:

// apply set of rules input form fields. @mixin input-form-fields {     input:not([type="hidden"]),     textarea {         @content;     } }  // apply set of rules button form fields. @mixin button-form-fields {     button, button {         @content;     } }  // apply set of rules select form fields. @mixin select-form-fields {     select {         @content;     } }  // apply set of rules form fields. @mixin all-form-fields {     @include input-form-fields {         @content;     }     @include button-form-fields {         @content;     }     @include select-form-fields {         @content;     } } 

basically all-form-fields mixin call other mixins, generating same set of rules different selectors.

if compile following code:

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

i like:

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

this not ideal, love if combine selectors.

does have ideas on how possibly combine selector strings returned 3 different mixins?

if don't mind storing selectors in strings, define different field types using variables:

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

your define mixins interpolated strings so:

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

as result, @include all-form-fields result in

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