CODEWITHSUNDEEP
csssass
Broda Noel
Broda Noel

Reputation: 1996

Is there an `and` operator (&&) in Scss?

I have this HTML element:

<button class="Button Button--is-primary Button--is-disabled Button--is-dark-theme">

And I need to defined in Scss a set of deep selectors like this:

.Button {
  // Apply this for all Buttons that are dark theme
  &--is-dark-theme {
    // Apply this for all Buttons that are Dark AND are Primary
    &--is-primary {
      //...
    }
  }
}

But, my problem is that rule is going to create this:

.Button--is-dark-theme--is-primary

When I actually need:

.Button--is-dark-theme.Button--is-primary

Upvotes: 1

Views: 3300

Answers (2)

Able
Able

Reputation: 366

I believe &#{&} { } could do the trick

Upvotes: 0

Broda Noel
Broda Noel

Reputation: 1996

I just found this:

.Button {
  $self: &;

  // Apply this for all Buttons that are dark theme
  &--is-dark-theme {

    // Apply this for all Buttons that are Dark AND are Primary
    &#{$self}--is-primary {
      color: red;
    }
  }
}

Which generates:

.Button--is-dark-theme.Button--is-primary {
  color: red;
}

Any better option?

Upvotes: 1

Related Questions