In sass kann ich & x & y & z

Question

In sass ich

asdf{ 
    &-b&-c {font-size: 16px;} 
} 

Für die CSS generiert tun wollen

asdf.asdf-b.asdf-c{ 
    font-size: 16px; 
} 

Ist das möglich in sass zu tun sein? Oder werde muss ich

mehrmals übergeordnete Element schreiben

Answer 1

Sie Mixins verwenden können:

@mixin fontSize($selector) { 
    .#{$selector}.#{$selector}-b.#{$selector}-c { 
    font-size: 16px; 
    } 
} 

@include fontSize("asdf"); 

Ergebnis

.asdf.asdf-b.asdf-c { 
    font-size: 16px; 
} 

Answer 2

Wenn Sie die Syntax wäre wurden mit Abzüglich:

.asdf { 
    &&-b&c { 
    font-size: 16px; 
    } 
} 

Allerdings erlaubt Sass nicht & zu b e direkt mit einem anderen & im selben Selektor verbunden. Stattdessen Wiederverwendung muss Verwendung von Interpolation (#{...}) machen:

.test { 
    &#{&}-b#{&}-c { 
    font-size: 16px; 
    } 
}