SCSS 用伪元素嵌套 Sass
Posted
技术标签:
【中文标题】SCSS 用伪元素嵌套 Sass【英文标题】：SCSS Nesting with pseudoelements 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 文件中的类属性之后设置父选择器，但这会引发错误。也可以在类属性之后设置一个前元素，但这会被编译器忽略。
有没有办法通过嵌套来实现这一点？
【问题讨论】：
【参考方案1】：看起来您需要稍微拆分选择器：
&[data-tag="foo"]
&::before
content: "foo";
&[class]::before
content: "foo-class";
很遗憾，但 SASS 不支持您尝试执行的操作。
【讨论】：
以上是关于SCSS 用伪元素嵌套 Sass的主要内容，如果未能解决你的问题，请参考以下文章