CODEWITHSUNDEEP
csssass
Ionuț Staicu
Ionuț Staicu

Reputation: 22204

SCSS selector pick

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!

Upvotes: 1

Views: 330

Answers (2)

Charles Roper
Charles Roper

Reputation: 20625

I would do it like this:

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

span.button:hover { color: green; }

a.button:hover { color: blue; }

Have a play yourself here: http://tinkerbin.com/CBuHSGfV

Upvotes: 1

MarioRicalde
MarioRicalde

Reputation: 9487

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.

Upvotes: 2

Related Questions