代码之家 › 专栏 › 技术社区 › cookch10msu

Sass/Scss:在生成的CSS中更改嵌套psuedo选择器的顺序:before和:hover?

compass-sass sass

cookch10msu · 技术社区 · 12 年前

给出以下Sass:

div.test {
    display: inline-block;
    background-color: #ffffff;
    color: #000000;
    &:before {
        & { 
            &:hover {
                border: 1px solid salmon;
            }
        }
        width: 25px;
        height: 25px;
        content: "";
    }
}

生成的CSS编译为:

div.test {
    display: inline-block;
    background-color: #ffffff;
    color: #000000;
}

    div.test:before {
        width: 25px;
        height: 25px;
        content: "";
    }

        div.test:before:hover {
            border: 1px solid salmon;
        }

我试图做的是生成分部测试: 悬停:之前 (电流输出为 之前:悬停 ).

注: 我能够使用以下Sass生成预期的CSS:

div.test {
    display: inline-block;
    background-color: #ffffff;
    color: #000000;
    &:hover {
        &:before {
            border: 1px solid salmon;
        }
    }

    &:before {
        width: 25px;
        height: 25px;
        content: "";
    }
}

然而,我想知道是否可以使用第一个嵌套方法或对其进行一些修改。

目的是避免重复以下内容:如果有这种方法可以使用Sass语法的话。我也知道这是不可能的。

1 回复 | 直到 12 年前

xiwcx 6 年前

虽然 initially the plan was to have '&' available in SassScript 作为一个可以操作的字符串,以便您可以在任何地方插入值, those plans have been abandoned for 3.3 due to complication 。不幸的是,你必须等待一段时间才能做到这一点。此刻“&”是不可变的,只是意味着“直到这一点的选择器链是什么”。

编辑 (2020.02.15):

从技术上讲,使用最新版本的dart-sass可以实现这一点:

@use "sass:selector";

@mixin unify-parent($child) {
    @at-root #{selector.unify(&, $child)} {
        @content;
    }
}

div.test {
    display: inline-block;
    background-color: #ffffff;
    color: #000000;

    &:before {
        width: 25px;
        height: 25px;
        content: "";

        @include unify-parent(":hover") {
            border: 1px solid salmon;
        }
    }
}

来源: