Как расширить взаимные модификаторы с помощью Stylus?

Question

У меня есть заголовок с некоторыми модификаторами:

.header { 
    font-weight: bold; 
} 
.header--main { 
    font-family: 'Segoe UI', sans-serif; 
} 
.header--type-error { 
    color: red; 
} 
.header--main.header--type-error { 
    font-size: 1.2em; 
} 

Более стильный:

.header { 
    font-weight: bold; 
    &--main { 
    font-family: 'Segoe UI', sans-serif; 
    } 
    &--type-error { 
    color: red; 
    } 
    &--main&--type-error { 
    font-size: 1.2em; 
    } 
} 

Если я хочу продлить Error__header с заголовком и его модов, я могу это сделать, как это

.Error__header { 
    @extend .header; 
    @extend .header--main; 
    @extend .header--type-error; 
    @extend .header--main.header--type-error; 
} 

Есть ли решение для получения эффекта @extend .header--main.header--type-error без его написания?

Answer 1

По очевидным причинам вы не можете иметь какой-то эффект, не делая ничего для него :)

Однако в вашем случае, вы могли бы хотеть использовать placeholder selector наряду с root reference:

.header, 
$foo { 
    font-weight: bold; 
    &--main, 
    /$foo { 
    font-family: 'Segoe UI', sans-serif; 
    } 
    &--type-error, 
    /$foo { 
    color: red; 
    } 
    &--main&--type-error, 
    /$foo { 
    font-size: 1.2em; 
    } 
} 

.Error__header { 
    @extend $foo; 
} 

будет равный коду, который вы написали. И если бы вы хотели, чтобы не иметь все селекторы как .Error__header--main.Error__header--type-error генерируется и только .Error__header добавлены к каждому из них, вы можете сделать это:

.header { 
    &, 
    /$foo { 
    font-weight: bold; 
    } 
    &--main, 
    /$foo { 
    font-family: 'Segoe UI', sans-serif; 
    } 
    &--type-error, 
    /$foo { 
    color: red; 
    } 
    &--main&--type-error, 
    /$foo { 
    font-size: 1.2em; 
    } 
} 

.Error__header { 
    @extend $foo; 
} 

и это будет компилировать

.header, 
.Error__header { 
    font-weight: bold; 
} 
.header--main, 
.Error__header { 
    font-family: 'Segoe UI', sans-serif; 
} 
.header--type-error, 
.Error__header { 
    color: #f00; 
} 
.header--main.header--type-error, 
.Error__header { 
    font-size: 1.2em; 
}