CODEWITHSUNDEEP
csssass
Mazz
Mazz

Reputation: 1879

Classbuilding with scss (double ampersand)

I want to get the following selector B__E.B__E--M so that B__E--M only applies if the element also has the B__E class;

I have the following:

.B {
    &__E {
        // default color
        &--M {
            // Color i want
        }
    }
}

The problem is, that the --M modifier should apply another color, but doesn't overwrite the default color from the __E element.

This is not allowed:

.B {
    &__E {
        // default color
    }
}

.B__E.B__E--M {
    // color i want
}

If nothing is possible, this would be my guess:

.B {
    &__E {
        // default color
        &.B__E--M {
            // Color i want
        }
    }
}

Upvotes: 1

Views: 476

Answers (1)

llobet
llobet

Reputation: 2790

You are looking for the double ampersand selector.

.B {
    &__E {
        color:black;
        &#{&}--M{
          color:white;
        }
    }
}

/* // Outputs:
  .B__E {
    color: black;
  }
  .B__E.B__E--M {
    color: white;
  }
*/

Upvotes: 3

Related Questions