时间戳

首页 > 解决方案 > SASS 选择器附加函数，带有多个带空格的选择器

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

问题描述

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

我尝试使用该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);
                        }
                    }
                }
            }
        }
    }
}

标签： csssass

解决方案

前段时间我编写了一个“父选择器”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>

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

推荐阅读