Функция выбора-добавления 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-микса «родительский селектор», и я считаю, что это то, что вам нужно. Проверьте это:

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

SCSS

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