Hover and focus mixin using @content

Posted on

in

,

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 *

About me

Mark Wong is a front end developer with 10+ years experience. Most of his knowledge of HTML5, CSS and Js is self taught.

Calendar

April 2024
M T W T F S S
1234567
891011121314
15161718192021
22232425262728
2930