Classbuilding with scss (double ampersand)

Question

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
        }
    }
}

Answer 1

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;
  }
*/