Sass Ampersand与伪选择器嵌套

Question

尝试使用SASS Ampersand以获得以下css输出。当我们在内部pesudo选择器中使用Ampersand时，它无法正常工作。

CSS

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

SASS

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

上面的代码基本上将-image与第一个孩子级联起来。

Answer 1

这是因为＆符号只是将父级与子级连接起来。如果您希望编译的CSS看起来像您的示例，则需要执行此操作：

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

Answer 2

如果你想要实现

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

使用您的代码将其编译为此

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

相反，你可以简单地把它写成这个。

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

希望有所帮助

Answer 3

听起来你误解了＆符号如何在Sass中运行。 ＆符号本质上是写入每个外部选择器然后在其后添加选择器的简写。由于.test-image与.test不同，您应该按如下方式指定它。

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

编译到

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