Styling a specific set of input types in a reusable way with Sass

Solution 1:

Your problem might better be solved by using variables to contain your selectors. By using a mixin, you're losing the ability to chain it with similar elements.

$form-input-text: 'input[type="text"], input[type="password"], input[type="search"], input[type="email"], input[type="tel"], input[type="url"]';
$form-input-buttons: 'input[type="submit"], input[type="reset"], input[type="button"], button';
$form-input-dates: 'input[type^="date"], input[type="month"], input[type="week"], input[type="time"]';
$form-input-not-radio: 'input:not([type="radio"]):not([type="checkbox"])';

#{$form-input-text}, textarea {
    @include border-radius(.25em);
    border: $form-input-border;
}

#{$form-input-text}, textarea, input[type="file"] {
    width: $form-input-width;
    max-width: 100%;
    -webkit-appearance: textfield
}

#{$form-input-buttons} {
    padding: .25em .5em;
}

Solution 2:

Thanks to Chris Eppstein on GitHub and @compass on Twitter, he cleared up with a gist that I am confusing the way a function works vs. a mixin. With the @content directive, I can achieve what I want thusly:

@mixin input_text_types( $focus:false ) {
    @if $focus {
      input[type=text]:focus, input[type=password]:focus, input[type=search]:focus, input[type=email]:focus, input[type=url]:focus, input[type=tel]:focus {
        @content;
      }
    } @else {
        input[type=text], input[type=password], input[type=search], input[type=email], input[type=url], input[type=tel] {
          @content;
        }
    }
}

It would still be used in the same way, with the @include directive.

For more about the slight differences between @mixin and @function, read Pure SASS Functions.