css - 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 的等价物。 &$ 在这两种语言中都不是特殊符号。 scss 中的 &$selected 由两部分组成:

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 中的所有东西——包括选择器的名称、特定颜色、值数组、索引、计数器等。 根据您发布的代码，我无法告诉您这个变量在您的代码中代表什么，即使我知道它正在使用中，我唯一知道它在您的情况下的值(value)是它包含一个选择器(我不知道是哪一个)。

重要的是你要明白，scss 中的大多数新符号都是为了节省 css 代码行而创建的(我想你会这样做)。但是要确切地知道从 scss 代码到 css 的最终编译，您需要发布整个 scss 代码，包括从 scss 文件本身导入的文件。

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