巢狀結構中的組合器
本文將說明巢狀結構中的組合器。
我們將說明如何在SASS中使用巢狀結構的組合器，並提供範例程式碼，幫助你一步步理解。
YouTube Video
巢狀結構中的組合器
在SASS中，可以根據父子關係簡潔地撰寫CSS選擇器，但對於如後代選擇器或相鄰選擇器等組合器，需要特別注意正確的使用方式。
巢狀結構基礎
在SASS中，透過將子選擇器巢狀於父選擇器中，能夠清楚且簡潔地表現CSS中的父子關係。
範例：基本巢狀結構
1.nav {
2 ul {
3 li {
4 color: blue;
5 }
6 }
7}編譯後的CSS
1.nav ul li {
2 color: blue;
3}父選擇器參照（&）
SASS的&用於參照當前父選擇器。
組合組合器和&
透過使用&可以構建靈活的選擇器。
範例
1.card {
2 & > .title {
3 font-weight: bold;
4 }
5 & + .card {
6 margin-top: 20px;
7 }
8}編譯後的CSS
1.card > .title {
2 font-weight: bold;
3}
4.card + .card {
5 margin-top: 20px;
6}「&」的省略寫法
在 SASS 中，當組合器放在選擇器開頭時，父選擇器會被隱式插入，因此你可以省略「&」符號。
可以省略的情況
例如，當你寫「+ .item」時，SASS 會在內部將其解讀為「& + .item」，並自動與父選擇器組合生成樣式。
範例
1.item {
2 + .item {
3 margin-top: 10px;
4 }
5 &--hover {
6 background-color: red;
7 }
8}編譯後的CSS
1.item + .item {
2 margin-top: 10px;
3}
4.item--hover {
5 background-color: red;
6}組合器概述
CSS組合器用來定義選擇器之間的關係。以下是主要的組合器類型。
-
後代選擇器（空格） 後代選擇器會選取父元素中的所有後代元素。 範例：
.parent .child -
子選擇器（
>） 子選擇器只會選取直接子元素。 範例：.parent > .child -
相鄰選擇器（
+） 相鄰選擇器會選取緊接在後的相鄰兄弟元素。 範例：.sibling1 + .sibling2 -
一般兄弟選擇器（
~） 一般兄弟選擇器會選取所有後續的兄弟元素。 範例：.sibling1 ~ .sibling2
在SASS中如何使用組合器
後代選擇器（空格）
在SASS巢狀結構中，預設會使用空格作為後代選擇器。
範例
1.container {
2 .header {
3 .title {
4 font-size: 20px;
5 }
6 }
7}編譯後的CSS
1.container .header .title {
2 font-size: 20px;
3}子選擇器（>）
如果要使用子選擇器，需在SASS程式碼中明確地寫上>。
範例
1.container {
2 & > .header {
3 & > .title {
4 font-size: 20px;
5 }
6 }
7}編譯後的CSS
1.container > .header > .title {
2 font-size: 20px;
3}相鄰選擇器（+）
需要針對緊接在後的兄弟元素設計樣式時，使用+。
範例
1.item {
2 & + .item {
3 margin-top: 10px;
4 }
5}編譯後的CSS
1.item + .item {
2 margin-top: 10px;
3}一般兄弟選擇器（~）
要設計同階層所有後續兄弟元素的樣式時，請使用~。
範例
1.alert {
2 & ~ .alert {
3 border-top: 1px solid red;
4 }
5}編譯後的CSS
1.alert ~ .alert {
2 border-top: 1px solid red;
3}與巢狀結構結合的偽類與偽元素
偽類與偽元素也可以在SASS中輕鬆編寫。
範例
1.button {
2 &:hover {
3 background-color: blue;
4 }
5 &::after {
6 content: '';
7 display: block;
8 }
9}編譯後的CSS
1.button:hover {
2 background-color: blue;
3}
4.button::after {
5 content: '';
6 display: block;
7}實用範例
下面是結合多個組合器的複雜樣式範例。
SASS代碼
1.menu {
2 .menu-item {
3 & > .submenu {
4 display: none;
5
6 & > .submenu-item {
7 font-size: 14px;
8 }
9 }
10 & + .menu-item {
11 margin-left: 15px;
12 }
13 }
14}編譯後的CSS
1.menu .menu-item > .submenu {
2 display: none;
3}
4.menu .menu-item > .submenu > .submenu-item {
5 font-size: 14px;
6}
7.menu .menu-item + .menu-item {
8 margin-left: 15px;
9}總結
正確掌握SASS中的巢狀結構與組合器時，可以寫出更簡潔且易讀的CSS。
您可以在我們的 YouTube 頻道上使用 Visual Studio Code 來跟隨上述文章一起學習。 請也查看我們的 YouTube 頻道。