How can I apply a different style to an element with an extra class in SASS

Question

I'm new to SASS and I'm trying to apply a style change to the div element with the active class. Here's my html

<div class="RatingSelector">
    <div class="circle">1</div>
    <div class="circle">2</div>
    <div class="circle active">3</div>
    <div class="circle">4</div>
    <div class="circle">5</div>
</div>

Here's the SASS code

.circle {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: $dark-blue;
  @include flexbox(center);
  color: $medium-grey;
  cursor: pointer;

  &:hover {
    background: $orange;
    color: $white;
    @include transition-ease;
  }

  &.active {
    background: white;
  } }

I'd like the background to be white when the div includes the active class. I know this is really basic, but I just can't figure it out.

Answer 1

You can style to the active class by going out of the style of circle scope , like this :

.circle {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: $dark-blue;
  @include flexbox(center);
  color: $medium-grey;
  cursor: pointer;

  &:hover {
    background: $orange;
    color: $white;
    @include transition-ease;
  }
 }
.active {
    background: white;
  }