使用 #{$this} 时 Sass 额外的空白

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

Sass 编译器将始终在父定义和子定义之间添加一个空格，除非您使用与符号 & 指定父规则的位置

您只需要在该规则的开头添加一个 & 符号：

.block{
    $this: &;

    &__element{
    // styles go here
    }

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