以下内容用于切换样式表:
body.light {
background: var(--bg);
color: var(--text);
& a {
color: var(--link_color);
}
}
body.dark {
color: var(--bg);
background: var(--text);
& a {
color: white;
}
}
此代码段位于最后加载的文件中，位于几个 CSS 文件中。
问题:虽然属性正确执行，但选择器的嵌套没有被拾取(预计＆符号是正确的方式)。
有一个框架 CSS 文件(在放置此代码的文件之前加载)，并且执行的是这些属性。
运行正确嵌套的选择器(无论是原生标签选择器(例如 `a)还是用户定义的选择器)有哪些语法要求？
更新
主题是通过 cookies[:theme] 生成的
body 标签采用这种方式:
<body class="<%= cookies[:theme] %>">
最佳答案
要使其在常规 CSS 中工作，请在不使用 & 的情况下进行重写。
示例:
body.light {
background: var(--bg);
color: var(--text);
}
body.light a {
color: var(--link_color);
}
body.dark {
color: var(--bg);
background: var(--text);
}
body.dark a {
color: white;
}
关于 & 符号，根据 Sass document :
The parent selector,
&, is a special selector invented by Sass that’s used in nested selectors to refer to the outer selector. It makes it possible to re-use the outer selector in more complex ways, like adding a pseudo-class or adding a selector before the parent.
目前，使用 & 需要像 Sass 这样的 css 预处理器，而且 & 被许多语法广泛采用，例如 Sass、SCSS、Less。
关于用于替代渲染的 CSS 嵌套，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/74418243/