marcelmoreau

.widget {
    $b: &;
    
    &__heading {
        color: navyblue;
    }
    
    // bad – does not evaluate to what we want
    &--halloween {
        &__heading {

marcelmoreau

/*

<div class="layer bgWhite">…</div>
<div class="layer bgGold">…</div>
<div class="layer bgWhite">…</div>
<div class="layer bgWhite">…</div>
<div class="layer bgGold">…</div>

*/

marcelmoreau

.dan {
    &__body {
        background-color: gold;
    }
    
    
    // I want to target .dan__body when it is a child of the .dan--dark modifier
    &--dark {
        &__body {
            background-color: lightgray;

marcelmoreau

.dan {
    &__body {
        background-color: gold;
    }
    
    
    // I want to target .dan__body when it is a child of the --dark modifier
    &--dark {
        &__body {
            background-color: lightgray;

marcelmoreau

.dan {
    &__body {
        background-color: gold;
    }
    
    
    // I want to target .dan__body when it is a child of the --dark modifier
    &--dark {
        &__body {
            background-color: lightgray;

marcelmoreau

.dan {
    &__body {
        background-color: gold;
    }
    
    &--dark {
        &__body {
            background-color: lightgray;
        }
    }

marcelmoreau

@function tint-color($color, $weight) {
    @return mix(white, $color, $weight);
}


@function shade-color($color, $weight) {
    @return mix(black, $color, $weight);
}

@function shift-color($color, $weight) {

marcelmoreau

.typicalWay {
    &__heading {
        color: red;
    }
    
    &.-halloween {
        .typicalWay__heading {
            color: orange;
        }
    }

marcelmoreau

.typicalWay {
    &__heading {
        color: red;
    }
    
    &.-halloween {
        .typicalWay__heading {
            color: orange;
        }
    }