SASS / SCSS表达式“&$”的等效CSS是什么?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (34)

正在试图了解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在CSS中没有对应的表达式。&$这两种语言都不是特殊符号。 &$selected在scss中结合了2个部分:

&: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文件中是否使用了变量。这个变量可以代表CSS中的每一件事情 - 包括选择器的名字,特定的颜色,值的数组,索引,计数器等等.

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

扫码关注云+社区

领取腾讯云代金券