Question

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

我已创建此SCSS代码段：

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

输出CSS文件如下所示：

＆＃13;

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

＆＃13;

现在我的元素前面有错误，因为class-attribute在声明的前元素之后输出结果如下：

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

是foo，而不是foo-class。

我试图在scss文件中的类attribtue之后设置父选择器，但这会引发错误。还要在class属性之后设置before-element，但编译器会忽略它。

有没有办法通过嵌套实现这一目标？

Answer 1

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

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

不幸的是，但SASS不支持您要做的事情。

SCSS嵌套与假元素Sass

1 个答案: