请教SCSS代码中&__container的含义及&符号作用

嘿，我来帮你把这些概念掰明白！

1. &符号的核心含义 #

在SCSS（Sass的语法扩展）里，&是父选择器的引用标记，它会直接替换成外层嵌套的父选择器名称。简单说，就是让你在嵌套规则里能复用外层的选择器，不用重复写一遍，让代码结构更紧凑。

2. &__container是什么？属于嵌套规则吗？ #

首先，&__container绝对属于SCSS的嵌套规则，而且它是结合了BEM命名规范的实用写法：

• BEM是Block（块）、Element（元素）、Modifier（修饰符）的缩写，用来规范CSS类名，比如块__元素的格式专门表示某个块下面的子元素，让类名语义化更强。
• 你这段代码里，外层的.c-notification是Block（块），&__container里的&会被替换成.c-notification，所以编译后会生成.c-notification__container这个选择器，对应块里的容器元素。

3. 你的代码编译后的CSS结果 #

把你写的SCSS：

.c-notification {
  &__container {
    top: 7px;
    z-index: $z-index-10;
  }
}

编译成普通CSS后，会变成这样：

.c-notification__container {
  top: 7px;
  z-index: [这里会替换成你定义的$z-index-10变量值];
}

这种写法既遵循了BEM的命名规范，又利用SCSS的嵌套特性让代码结构更清晰，不用重复敲父选择器的名称，非常实用。

内容的提问来源于stack exchange，提问作者Prostitutor