CSS中与SASS/SCSS表达式"&$"等价的是什么？

Question

CSS中与SASS/SCSS表达式"&$"等价的是什么？

4

你好，我尝试理解一个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: {}  
}

我想知道CSS语法中'&$selected'的含义。我遇到的问题是，我想通过传递样式来覆盖背景颜色，但它并没有覆盖它。我想了解这里的背后发生了什么。

- Istvan Romhany González

$selected 是您代码中一个变量的名称，并将编译为该变量包含的任何内容。这不是标准的 CSS。 - Jon Uleis

&$ 不是一个东西，但 &$selected 将会是父选择器 (&) 和 $selected 变量值的组合。如果我们要字面理解，这不是 CSS 语法，而是 SCSS 或 SASS 语法。 - Alex W

我知道这不是CSS，我的问题是它编译成CSS后是什么样子！在CSS中，'&$selected'表达式的等效形式是什么？谢谢！ - Istvan Romhany González

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Coral Kashri · Accepted Answer

在CSS中没有与表达式&$selected相对应的内容。&$在这两种语言中都不是特殊符号。在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代码中出现。

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

重要的是要理解，大多数新的SCSS符号都是为了节省CSS代码的行数（我认为您已经知道）。但是，要确切地了解从SCSS代码到CSS的最终编译，您需要发布整个SCSS代码，包括从SCSS文件本身导入的文件。

希望现在我已经讲得更清楚了。