< Back to Coding, SASS

Hover and focus mixin using @content

A simple mixin that ensures you add focus styling along with your hovers:

SASS:

@mixin hoverFocus {
 &:hover, &:focus {
 @content;
 }
}

/* example */

.defaultBtn{
 @include hoverFocus{
 text-decoration: none;
 }
}

 which then outputs to:

.defaultBtn:hover, .defaultBtn:focus {
 text−decoration: none; }

Leave a Reply

Your email address will not be published. Required fields are marked *