Sass Ampersand Verschachtelung mit Pseudo Selektoren

Question

Der Versuch, das SASS Ampersand zu verwenden, um die folgende css Ausgabe zu bekommen. Es funktioniert nicht, wenn wir Ampersand mit dem inneren Peso-Selektor verwenden.

CSS

.test:first-child .test-image { display: block; } 

SASS

.test { 
    &:first-child { 
     display: inline-block; 
     &-image { 
      display: block; 
     } 
    } 
} 

Above Code im Grunde die -Image mit erstem Kind kaskadieren.

Answer 1

Dies liegt daran, das Ampersand nur ist das Elternteil mit dem Kind verketten. Wenn Sie die kompilierte CSS aussehen wie Ihr Beispiel möchten, müssen Sie dies tun:

.test { 
    &:first-child &-image{ 
     display: block;  
    } 
} 

Answer 2

Wenn Sie

.test:first-child .test-image { display: block; } 

mit Ihrem Code zu erreichen versuchen, ist es wie dieser

.test:first-child-image { 
    display: block; 
} 

Stattdessen zusammengestellt bekommen, können Sie es einfach wie diese schreiben.

.test:first-child { 
     .test-image { 
      display: block; 
     } 
} 

Hoffe, es hilft

Answer 3

Es klingt wie Sie verwechselt haben, wie die Ampersand in Sass arbeitet. Das kaufmännische Und ist im Wesentlichen eine Abkürzung für das Schreiben jedes äußeren Selektors und das anschließende Hinzufügen des Selektors nach dem Ende. Da sich .test-image von .test unterscheidet, sollten Sie es wie folgt angeben.

.test { 
    &:first-child { 
     .test-image { 
      display: block; 
     } 
    } 
} 

Compiliert zu

.test:first-child .test-image { 
    display: block; 
}