0

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.

2
  • The problem is that browsers has default a-tag styles on hover. So you should re-declare them to make it work properly. Of course, you can use !important, but it is a bad practise to overuse it. Commented Aug 28, 2019 at 7:38
  • @KyrylStronko, that's not really the question. I was just wondering how to rewrite the rule I have above. The code does work. Commented Aug 28, 2019 at 7:41

2 Answers 2

5

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

a {
  &, &:hover {
   color: #color;
  }
}
1
  • 1
    Yes this is what I want! Thanks! Commented Aug 28, 2019 at 7:43
-1

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?

5
  • Thanks for the answer! What I wanted is just a simplified SASS way to do it! Commented Aug 28, 2019 at 7:43
  • this is not question related answer
    – channasmcs
    Commented Aug 28, 2019 at 7:43
  • this is a question related answer, i expaned on my answer to state that this is valid SASS Code. Of course you can also do it like in the other answer but why would anyone want to do this? It's not easily read- and/or maintainable.
    – cloned
    Commented Aug 28, 2019 at 7:57
  • @cloned What if OP want to add some specific rules to a? Using nesting instead of redeclaring a selector is perfectly maintainable.
    – Arkellys
    Commented Aug 28, 2019 at 8:01
  • I agree, nesting is perfectly maintainable. But only use it when necessar, you can adapt my rules and add nesting, but in the original question it was just about changing color. It still doesn't really make sense for me to define color twice since it doesn't get changed when you hover something. That's why i wrote to check the previous css if this is setting some rule they don't need.
    – cloned
    Commented Aug 28, 2019 at 8:55

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.