Question

I just started to using sass/scss and i have a small issue. Let’s assume this code:

.button {
  color:#c00;
  &:hover {
    color:#000;
  }
}

Everything is awesome and works as it supposed to. But.. Let’s say I want to do different hovers depending of tag. So, if the tag is a span to show a color and if the tag is a a to show another color.

Is this possible without repeating some part of the selector?

Thanks!

Answer 1

No. Remember that in the end everything compiles to CSS.

The way to do it would be the following:

.button {
  .green {
    color:green;
    &:hover { color:black; }
  }
  .red {
    color:red;
    &:hover { color:black; }
  }
}

You would need to add a class though.

You could use the mixin approach but it’s going to be more verbose.