サス余分な空白＃{$この}

Question

を使用しているとき、私はこの

.block{ 
    $this: &; 

    &__element{ 
    // styles go here 
    } 

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

のような要素を持って、それを含むブロックの上にホバリングするとき、私はサブ要素に変化を誘導することができるようにこれは基本的に（私は」 BEMを使用して）。しかしコンパイル時にSassは余分なスペースを追加します

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

そしてこのスタイルは無効です。これを回避する唯一の方法は、書き込みによるものです。

.block{ 
    $this: &; 

    &__element{ 
    // styles go here 
    } 

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

なぜこのようなことが起こりますか？それは私が使用しているローダーのためですか？あなたはあなただけでは、ルールの先頭にアンパサンドを追加する必要がアンパサンドに&

を使用して、親ルールの場所を指定しない限り、サスコンパイラは常に親と子の定義の間にスペースを追加します

Answer 1

：

.block{ 
    $this: &; 

    &__element{ 
    // styles go here 
    } 

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