SASS/SCSS 表达式“&$”在 CSS 中的等价物是什么？

Question

您好，我正在尝试了解 material-ui 组件的工作原理，我遇到了以下样式：

root: (0, _extends3.default)({}, theme.typography.subheading, {  
  height: theme.spacing.unit * 3,  
  boxSizing: 'content-box',  
  overflow: 'hidden',  
  textOverflow: 'ellipsis',  
  whiteSpace: 'nowrap',  
  '&:hover': {  
    backgroundColor: theme.palette.text.lightDivider  
  },  
  '&$selected': {  
    backgroundColor: theme.palette.text.divider  
  }  
 }),  
 selected: {}  
}

我想知道 '&$selected' 在 CSS 语法中的含义。 我遇到的问题是我想覆盖将样式传递给选定的背景颜色，但它并没有覆盖它。我想了解这里幕后发生的事情。 谢谢！！！

Answer 1

在 css 中没有表达式 &$selected 的等价物。 &$ 在两种语言中都不是特殊符号。 &$selected 在 scss 中由 2 部分组合而成：

1. &: sccc- 在父选择器之后插入新的子选择器。示例：

scss：

main-selector {
    color: blue;

    &.sub-selector {
        display: block;
    }
}

等效的 css：

main-selector {
    color: blue;
}
main-selector.sub-selector {
    display: block;
}

如您所见，& 符号在 css 中根本不存在，仅在 scss 代码中出现。

1. $selected - 这意味着 scss 中的一个变量。在 css 代码中，您将无法知道源 scss 文件中是否使用了 in 变量。 这个变量可以代表 css 中的每一件事——包括选择器的名称、特定的颜色、值数组、索引、计数器等。 根据您发布的代码，我无法告诉您此变量在您的代码中代表什么，即使我知道它正在使用中，我唯一知道它在您的情况下的价值是它包含一个选择器（我不知道是哪一个）。

理解这一点很重要，scss 中的大多数新符号都是为了节省 css 代码行而创建的（我认为您会这样做）。但是要确切知道从 scss 代码到 css 的最终编译，您需要发布整个 scss 代码，包括从 scss 文件本身导入的文件。

我希望我现在说得更清楚了。