Mixin that allows you to pass @content to one or all of the typical selector modifiers - :active, :hover, :focus. Generated by SassMeister.com.

SassMeister-input.scss

// ----
// libsass (v3.3.6)
// ----

///
 /// Add styles on active/focus/hover
 ///
 /// @group Functions
 ///
 /// @content Really more of a parameter as the mixin will output an empty rule if none is provided.
 ///
 /// @param {arglist} $states [(active, hover, focus)] comma-separated list of states you wish to apply `@content` to.
 ///
 /// @example scss - Usage
 ///	 .example {
 ///		@include visual-focus{
 ///			color: #000;
 ///		}
 ///	}
 ///
 ///	.example2 {
 ///		@include visual-focus(focus, hover) {
 ///			color: #000;
 ///		}
 ///	}
 ///
 /// @example css - Output
 ///	.example:active,
 ///	.example:focus,
 ///	.example:hover {
 ///		color: #000;
 ///	}
 ///
 ///	.example:focus,
 ///	.example:hover {
 ///		color: #000;
 ///	}
 ///
 @mixin visual-focus( $states... ) {
 	@if ( 0 < length( $states ) ) {
 		$selector: '';
 		// This @each concatenates the arglist so we get one rule output instead of length( $states )
 		@each $state in $states {
 			// scss-lint:disable StringQuotes
 			// unquote() because of a deprecation notice, disable because of nested quotes :facepalm:
 			$selector: unquote( '#{$selector }  &:#{$state}  ,' );
 			// scss-lint:enable StringQuotes
 		}
 
 		#{$selector} {
 			@content;
 		}
 	} @else {
 		&:active,
 		&:focus,
 		&:hover {
 			@content;
 		}
 	}
 }
 
 ///
 /// Remove outline on focus
 ///
 /// @group Code Blocks
 ///
 /// @link http://www.outlinenone.com/ Remember to define focus styles!
 ///
 /// @example scss - Usage
 ///	.example {
 ///		@include no-outline;
 ///	}
 ///
 /// @example css - Output
 ///	.example:focus {
 ///		outline: 0;
 ///	}
 ///
 @mixin no-outline {
 	&:focus {
 		outline: 0;
 	}
 }
 
 .example {
 		@include visual-focus{
 			color: #000;
 		}
 }
 
 .example2 {
 		@include visual-focus(focus, hover) {
 			color: #000;
 		}
 }
 
 .example3 {
  @include no-outline;
 }

SassMeister-output.css

.example:active, .example:focus, .example:hover {
  color: #000;
}

.example2:focus, .example2:hover {
  color: #000;
}

.example3:focus {
  outline: 0;
}