CODEWITHSUNDEEP
csssass
AngularDebutant
AngularDebutant

Reputation: 1576

combine style to element and hovered element in sass

I have an element a to which I want to set a color. The rule should also work when hovered. I can do 

  a {
    color: #color;
    &:hover {
      color: #color;
    }
  }

And it works fine, but I was wondering if there is a way to do it without repeating the color rule.

Upvotes: 0

Views: 292

Answers (2)

cloned
cloned

Reputation: 6752

It's not entirely clear for me what you are asking because you really should have a different style for :hover than for normal elements. Standard behaviour is that link's get underlined on hover but the color shouldn't change. So if you want to change the color on hover then no, there is no way to not repeat the color. If you want to have the same color then you have this functionality "out of the box" unless you changed it somewhere in your previous CSS. In that case you can remove it from there and not have to declare it twice. 

 a, a:hover {
    color: #color;
  }

would be the easiest way to specify it both at once I think.

This is valid SASS code, nothing stops you from doing it like this in SASS. Of course you can make your life more complicated and add some nestings but what would the benefit of this be?

Upvotes: -1

Arkellys
Arkellys

Reputation: 7811

You can use the ampersand alone to apply the rule to the parent:

a {
  &, &:hover {
   color: #color;
  }
}

Upvotes: 5

Related Questions