在CSS中，SASS/SCSS表达式"&$“的等价物是什么？
在CSS中，SASS/SCSS表达式"&$“的等价物是什么？
提问于 2018-05-31 22:01:28
您好，我正在尝试了解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语法中是什么意思。我遇到的问题是，我想覆盖背景颜色，将样式传递给selected，但它没有覆盖它。我想了解这里幕后发生的事情。谢谢！
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-06-01 07:36:41
表达式&$selected在css中没有等效项。在这两种语言中，&$都不是一个特殊的符号。scss中的&$selected由两部分组成：
&：sccc-紧跟在父选择器之后插入新子选择器。例如：
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文件中是否使用了In变量。这个变量可以代表css中的所有东西--包括选择器的名称，特定的颜色，数组，索引，计数器等等。根据你发布的代码，我不能告诉你这个变量在你的代码中代表什么，即使我知道它正在使用中，我唯一知道的就是它在你的例子中的值，就是它包含了一个选择器(我不知道是哪个)。
重要的是你要明白，scss中的大多数新符号都是为了节省css代码行而创建的(我想你确实是这样做的)。但是为了准确地知道从scss代码到css的最终编译过程，您需要发布整个scss代码，包括从scss文件本身导入的文件。
我希望我现在说得更清楚了。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50626150
复制相关文章
相似问题