Useful Sass mixins

state.scss

@mixin state($states...) {
  $list: ();
  $selectors: ();

  $FULL_STATES: (
    'none': (''),
    'active': (':active', '.active'),
    'hover': (':hover'),
    'focus': (':focus', '.focus'),
    'visited': (':visited'),
    'valid': (':valid', '.valid'),
    'invalid': (':invalid', '.invalid'),
    'enabled': ('[enabled]', ':enabled', '.enabled'),
    'disabled': ('[disabled]', ':disabled', '.disabled'),
    'required': ('[required]', ':required', '.required')
  );

  @each $state in $states {
    @if map-get($FULL_STATES, $state) {
      $list: join($list, map-get($FULL_STATES, $state), comma);
    }
    @else if type-of($state) == string {
      $list: join($list, '.#{$state}', comma);
    }
  }

  @each $item in $list {
    $prefixed-item: str-insert($item, '&', 1);
    $selectors: append($selectors, $prefixed-item, comma);
  }

  #{$selectors} {
    @content;
  }
}