在 SCSS（Sass）中，&?符號是一個父選擇器引用，它代表當前嵌套規則的外層選擇器。主要用途如下：

---

1.?連接偽類/偽元素

scss

復制

下載

.button {background: blue;&:hover {  // 相當于 .button:hoverbackground: darkblue;}&::after { // 相當于 .button::aftercontent: ">";}
}

編譯結果：

css

復制

下載

.button {background: blue;
}
.button:hover {background: darkblue;
}
.button::after {content: ">";
}

---

2.?串聯選擇器（BEM 風格命名）

scss

復制

下載

.menu {&__item {   // 相當于 .menu__itemcolor: red;}&--dark {   // 相當于 .menu--darkbackground: black;}
}

編譯結果：

css

復制

下載

.menu__item {color: red;
}
.menu--dark {background: black;
}

---

3.?嵌套上下文

scss

復制

下載

.page {.dark-theme & { // 相當于 .dark-theme .pagebackground: #333;}
}

編譯結果：

css

復制

下載

.dark-theme .page {background: #333;
}

---

4.?避免重復書寫父選擇器

scss

復制

下載

.card {&-header { ... }  // .card-header&-body { ... }    // .card-body&-footer { ... }  // .card-footer
}

---

?? 注意事項

• &?必須寫在選擇器開頭：&hover（錯誤）? →?&:hover（正確）?

• 深層嵌套時：&?會引用完整的選擇器鏈：

  scss

  復制

  下載

  .a {.b & { // 編譯為 .b .a}
  }

---

總結

場景	示例	編譯結果
偽類	&:hover	.parent:hover
BEM 命名	&__item	.parent__item
修改上下文	.context &	.context .parent
簡化重復前綴	&-suffix	.parent-suffix

合理使用?&?能讓 SCSS 代碼更簡潔、可讀性更強，特別適合組件化開發和 BEM 命名規范！