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: {}  
}

我想知道'＆amp; $ selected'在CSS语法中意味着什么。我遇到的问题是我想覆盖背景颜色，将样式传递给选中，但它不会覆盖它。我想了解幕后发生的事情。感谢!!!

Answer 1

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

&：sccc-在父选择器插入新的子选择器之后。 eample：

<强> SCSS：

main-selector {
    color: blue;

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

等效css：

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

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

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

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

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

CSS和SASS / SCSS表达式“＆amp; $”的等价物是什么？

1 个答案: