SASS选择器附加函数，带有多个带有空格的选择器

Question

不过，我的目标是在嵌套选择器中使用@at-root body.home #{&}，因为我的img和video选择器需要相同的属性@at-root body.home #{&}只针对img，而不针对video。

我试着使用selector-append函数，它可以完成这项工作，但问题是它去掉了空白，所以不是：

body.home .slider__container.--media .slider .slide img,body.home .slider__container.--media .slider .slide video

如何在多个选择器中保留嵌套选择器但引用body.home？我想我可以用一节课(哈哈(，但我很好奇！

我最终使用

body.home.slider__container.--media .slider .slide img,body.home.slider__container.--media .slider .slide video

.slider__container {
&.--media {
.slider {
.slide {
img, video {
max-height: calc(100% - (30px * 4) - (28px * 2));
max-width: calc(100% - 60px);
@at-root #{selector-append('body.home', &)} {
max-height: calc(100% - (65px * 4) - (28px * 2));
transition: transform 400ms, filter 400ms;
transform: scale(0.8);
}
@include media(tablet-p) {
max-height: calc(100% - (20px * 4) - (28px * 2));
max-width: calc(100% - 40px);
@at-root #{selector-append('body.home', &)} {
max-width: calc(100% - 100px);
}
}
@include media(phone) {
max-height: calc(100% - (20px * 4) - (28px * 2));
max-width: calc(100% - 40px);
@at-root #{selector-append('body.home', &)} {
max-height: calc(100% - (65px * 4) - (24px * 2));
max-width: calc(100% - 50px);
transform: scale(0.7);
}
}
}
}
}
}
}

Answer 1

我前段时间编写了一个"父选择器"SCSS mixin，我相信这正是您所需要的。看看：

<div class="a">
hello there
<div class="b">
<div class="c">
I'M THE C
<div class="d">
<div class="e">
<div class="f">
<div class="g"></div>
</div>
</div>
</div>
</div>
</div>
</div>

scs-

@mixin parent($el) {
$index: str-index(#{$el}, ' ');
$this-parent: str-slice(#{$el}, 0, $index);
@at-root #{$this-parent}{
@content;
}
}
.a{
$main-parent: &;
background: lightgreen;
.b{
.c{
background: green;
.d{
.e{
.f{
.g{
@include parent(&){
background: red;
}
/* targetting specific elements with just at root  */
@at-root #{$main-parent} .b .c {
background: salmon;
}
}
}
}
}
}
}
}