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
        }
    }
}

使用＃{$ this}时会占用额外的空白空间

1 个答案: