请解释一下：SassScript 父选择器属性

Question

我在 sassscript 中看到了这段代码，但它没有任何意义，而且我无法找到任何有关提及 sasscript css 输出的官方文档

Sass 脚本

.main aside:hover,
.sidebar p {
  parent-selector: &;
  // => ((unquote(".main") unquote("aside:hover")),
  //     (unquote(".sidebar") unquote("p")))
}

CSS 输出

.main aside:hover,
.sidebar p {
  parent-selector: .main aside:hover, .sidebar p;
}

用 CSS 解释这是如何工作的。这是否由 w3c 正式记录。

Answer 1

在标准 CSS 中，没有“父选择器”功能。 CSS 主要根据元素与其他元素的关系来处理元素的选择和样式设置，但它没有提供根据子元素的行为选择父元素的方法。

它只能在该预处理器的上下文中工作（在 SassScript 中）。

如提到的页面上所述：

父选择器也可以在 SassScript 中使用。它是一个特殊的表达式，以与选择器函数使用的相同格式返回当前父选择器：逗号分隔的列表（选择器列表），其中包含空格分隔的列表（复杂选择器），其中包含不带引号的字符串（复合选择器）。

简而言之，以下代码仅适用于 SassScript 预处理器：

.main aside:hover,
.sidebar p {
  parent-selector: .main aside:hover, .sidebar p;
}