Question

鉴于以下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;
        }

我尝试做的是生成 div.test：悬停：之前 （当前输出为之前：悬停）。< / p>

注意：我可以使用以下Sass生成预期的CSS：

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

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

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

目标是避免重复＆amp;：之前如果有这样的方法使用Sass语法。我也知道这是不可能的。

Answer 1

将initially the plan was to have '&' available in SassScript作为可以操作的字符串，以便您可以在任意位置插入值those plans have been abandoned for 3.3 due to complication。不幸的是，你必须等待一段时间才能做到这一点。目前'＆amp;'是不可变的，只是意味着“到目前为止，无论选择器链是什么”。

Sass / Scss：更改嵌套伪选择器的顺序：before和：hover in generated CSS？

1 个答案: