SCSS 用伪元素嵌套 Sass答案

【问题标题】：SCSS Nesting with pseudoelements SassSCSS 用伪元素嵌套 Sass
【发布时间】：2015-01-16 20:02:52
【问题描述】：

我正在学习 SCSS 的嵌套概念。现在我通过结合复合选择器使用伪元素遇到了一个问题。

我已经创建了这个 SCSS sn-p:

&[data-tag="foo"]::before{
    content: "foo";
    &[class]{
        content: "foo-class";
    }
}

输出的 CSS 文件如下所示：

body[data-tag="foo"]::before {
  content: "foo"; 
}
/* the class selector appends after the before declaration */
body[data-tag="foo"]::before[class] {
    content: "foo-class"; 
}

现在我有错误的前元素，因为类属性在前元素声明之后。
这个的输出：

<body  class="notice" data-tag="foo"/>

是 foo，不是 foo 类。

我曾尝试在 scss 文件中的类属性之后设置父选择器，但这会引发错误。也可以在类属性之后设置一个前元素，但这会被编译器忽略。

有没有办法通过嵌套来实现这一点？

【问题讨论】：

标签： sass

【解决方案1】：

看起来您需要稍微拆分选择器：

&[data-tag="foo"]{
    &::before {
        content: "foo";
    }
    &[class]::before {
        content: "foo-class";
    }
}

很遗憾，但 SASS 不支持您尝试执行的操作。

【讨论】：