CODEWITHSUNDEEP
htmlcsssasshover
Omer
Omer

Reputation: 1796

Extend &:hover of any class to any other class's hover in SASS or SCSS

Is there a way to extend &:hover of any class to any other class's hover?

My code is something like this and it stopped the hover of both classes:

HTML

<a href="#" class="button1">Button 1</a>
<a href="#" class="button2">Button 2</a>

SCSS

.button1 {
  background: black;
  padding: 5px 10px;
  text-decoration: none;
  color: white;
  &:hover {
    background: red;
  }
}

.button2 {
  background: blue;
  padding: 5px 10px;
  text-decoration: none;
  color: white;
  &:hover {
    @extend .button1:hover
  }
}

Upvotes: 6

Views: 10279

Answers (5)

Floris
Floris

Reputation: 3127

For me it worked using this newer sass syntax.

.link:hover {
    .button {
        @extend .other-button, :hover;
    }
}

Upvotes: 0

Yasin UYSAL
Yasin UYSAL

Reputation: 619

You can use mixin

@mixin hoverStyle {
   &:hover{
     background: red;
   }
}

.button1 {
   background: blue;
   padding: 5px 10px;
   text-decoration: none;
   color: white;
   @include hoverStyle;
}

.button2 {
   background: blue;
   padding: 5px 10px;
   text-decoration: none;
   color: white;
   @include hoverStyle;
}

Upvotes: 1

FDisk
FDisk

Reputation: 9416

Try this solution. It worked for me http://jsbin.com/lezuwalida/edit?html,css,output

the generated css looks same

.demon:hover, .demon.demo {
  outline: 3px solid red;
}

.demon2:hover, .demon2.demo2 {
  outline: 3px solid red;
}

Upvotes: 0

Damian Cardozo
Damian Cardozo

Reputation: 122

A good way to handle all this stuff is using variables also, for example if you define something like this:

$buttons-hover-color: #somecolor;

Then you can call it in any button and if int he future you wanna change it just change the variable and all the buttons will update. Another important thing is that extend doesn't work in media queries, so maybe in the future when you are targeting mobile you don't wanna have that red in mobile so you just need to create a another var to it.

something like this:

$btn-hover-color: red;
$btn-hover-mobile: black;

.button1 {
 background: black;
 padding: 5px 10px;
 text-decoration: none;
 color: white;
 &:hover {
  background-color: $btn-hover-color;
 }
}

.button2 {
  background: blue;
  padding: 5px 10px;
  text-decoration: none;
  color: white;
  &:hover {
    background-color: $btn-hover-color;
  }

  @media (max-width: 800px) {
    &:hover {
      background-color: $btn-hover-mobile;
    }
  }
 }

Hope this help you

Upvotes: -2

Denis Frezzato
Denis Frezzato

Reputation: 968

You can use a placeholder.

%hover {
  background: red;
}

.button1 {
  background: black;
  padding: 5px 10px;
  text-decoration: none;
  color: white;
  &:hover {
    @extend %hover;
  }
}

.button2 {
  background: blue;
  padding: 5px 10px;
  text-decoration: none;
  color: white;
  &:hover {
    @extend %hover;
  }
}

Or, perhaps a better solution, use a more generic class for your buttons:

.btn {
  padding: 5px 10px;
  text-decoration: none;
  color: white;

  &:hover {
    background: red;
  }
}

.btn--1 {
  background: black;
}

.btn--2 {
  background: blue;
}

Upvotes: 11

Related Questions