Mehr Vorrang/Spezifität in weniger CSS-Klasse

Question

Ich habe einen weniger Code wie:

.block__element { 
    background: red; 
    &--modifier { 
    background: yellow; 
    } 
} 

Ich will mehr Spezifität .block__element - Modifikator wie:

.block__element.block__element--modifier { 
    background: yellow: 
} 

also, dass sie kann einige andere Stile überschreiben. Ich kann es erreichen:

.block__element { 
    background: red; 
    &--modifier.block__element { 
    background: yellow; 
    } 
} 

ich will, ist es eine einfache Möglichkeit wissen?

Answer 1

.block__element { 
    background: red; 
    &&--modifier { 
     background: yellow; 
    } 
} 

link

Answer 2

Sie könnten es mit Hilfe der variablen Interpolation auf eine etwas ausgefallenere Weise erreichen, so dass Sie jedes Mal, wenn Sie die Spezifität einer Klasse/eines Modifizierers erhöhen müssen, diese verwenden können. Es erscheint zuerst komisch, aber wenn Sie sich daran gewöhnen, werden Sie es lieben und Ihr Code wird viel sauberer und leichter zu lesen sein.

Check the official documentation

.block__element { 
    @this: block__element; 
    background: red; 

    &.@{this}--modifier-primary { 
     background: yellow; 
    } 

    &.@{this}--modifier-secondary { 
     background: green; 
    } 

    &.@{this}--modifier-tertiary { 
     background: green; 
    } 
}