Sass Extra Leerzeichen bei Verwendung von # {$ this}

Question

Ich habe ein Element wie diese

.block{ 
    $this: &; 

    &__element{ 
    // styles go here 
    } 

    &:hover{ 
     #{$this}__subelement { 
     // styles go here 
     } 
    } 
} 

Diese ist im Grunde so, dass ich Änderungen an dem Subelement induzieren kann, wenn auf dem Block schwebt, die es enthält (I‘ m mit BEM). Aber nach der Kompilation fügt Sass zusätzlichen Platz hinzu

.block:hover .block__subelement { 
// styles go here 
} 

Und macht diesen Stil ungültig. Die einzige Möglichkeit, dies zu umgehen, ist das Schreiben

.block{ 
    $this: &; 

    &__element{ 
    // styles go here 
    } 

    &:hover{ 
     #{$this}__subelement{ // remove spacing here 
     // styles go here 
     } 
    } 
} 

Warum passiert das? Ist es wegen der Lader, die ich benutze oder?

Answer 1

Der Sass Compiler wird immer einen Raum zwischen einem Elternteil und Kind Definition hinzufügen, wenn Sie den Speicherort des übergeordneten Regel angeben mit dem Ampersand &

Sie brauchen nur ein kaufmännische zu Beginn dieser Regel hinzuzufügen:

.block{ 
    $this: &; 

    &__element{ 
    // styles go here 
    } 

    &:hover{ 
     // Add ampersand to reference parent rule here 
     &#{$this}__subelement{ // remove spacing here 
     // styles go here 
     } 
    } 
}