when i write such code in scss

a { border: 3px solid rgba(0, 0, 0, 0); font-size: 1.3em; padding: 24px; display: inline-block; color: inherit; text-decoration: none; text-transform: capitalize; margin-right: 34px; :hover { transition: 0.3s; border: 3px solid #fff; border-radius: 30px; } }

it translates to css so

 .wrapper .container .concontainer .navbar a :hover { transition: 0.3s;border: 3px solid #fff;border-radius: 30px;}

But if you manually remove the space between a and: hover, everything will work in what is my mistake?

  • It should look like this: a:hover { ... } , and now, if you compile, it turns out like this: a > :hover { ... } . Use & to specify a:hover .. - entithat

1 answer 1

This is how it should be:

 &:hover { ...
  • thank you so much!!! - Tigran Vardanyan
  • @TigranVardanyan mark the answer as accepted. - Sasha Omelchenko