CODEWITHSUNDEEP
csssassstyles
Sergino
Sergino

Reputation: 10838

How to declare two classes for element with scss

I have this scss code:

button.green{
  background-color: $green;
  .current {
    color: $white;
  }
}

I want to apply two classes to my button <button class="green current"></button> but my scss code just does not work. How would you fix that in a proper scss manner?

Also tried that with no luck:

button {
  .green{
    background-color: $green;
  }
  & .current {
    color: $white;
  }
}

Upvotes: 1

Views: 1094

Answers (2)

iamrajshah
iamrajshah

Reputation: 979

.green.current {
     background-color: $green;
     color: $white;
}

This will apply both class!!

Upvotes: 0

Mikel Wohlschlegel
Mikel Wohlschlegel

Reputation: 1476

Nearly correct, missing "&" in your nesting to connect button.green and .current.

The css output of your scss is:

button.green > .current

meaning, you style an element "current" within its parent "button.green".

Correct:

button.green{
  background-color: $green;
  &.current {
    color: $white;
  }
}

Which outputs:

button.green.current

Upvotes: 5

Related Questions