SASS中的巢狀結構
本文將說明SASS中的巢狀結構。
我們將一步步說明SASS的巢狀寫法，並包含範例程式碼以加深您的理解。
YouTube Video
SASS中的巢狀結構
SASS是一種CSS的擴展樣式語言，提供了許多高效率設計樣式的功能。在這些功能之中，巢狀語法尤為實用，可以直觀地表現CSS的層次結構。
巢狀語法的基礎
在SASS中，您可以用階層式結構撰寫CSS選擇器，讓程式碼更具可讀性。舉例來說，讓我們看看如何利用巢狀語法重寫以下CSS程式碼。
1/* CSS */
2.nav {
3 background-color: #333;
4}
5.nav ul {
6 margin: 0;
7 padding: 0;
8}
9.nav ul li {
10 list-style: none;
11}
12.nav ul li a {
13 color: #fff;
14 text-decoration: none;
15}使用SASS的巢狀語法，您可以如下簡潔地撰寫這段程式碼。
1/* SASS */
2.nav {
3 background-color: #333;
4
5 ul {
6 margin: 0;
7 padding: 0;
8
9 li {
10 list-style: none;
11
12 a {
13 color: #fff;
14 text-decoration: none;
15 }
16 }
17 }
18}- 這份程式碼利用SASS巢狀語法，簡明地層次化描述了導覽選單的樣式。藉由巢狀寫法，父子關係變得一目瞭然，也提升了可讀性。
引用父選擇器（&）
當您在巢狀樣式中需要引用父選擇器時，可以使用&符號。這能讓您建立具有特定狀態或修飾符的選擇器。
1.button {
2 background-color: #007bff;
3 color: #fff;
4
5 &:hover {
6 background-color: #0056b3;
7 }
8
9 &:active {
10 background-color: #003f7f;
11 }
12}- 這段程式碼在SCSS中利用
&為父選擇器.button定義了:hover與:active狀態。
產生的CSS
1.button {
2 background-color: #007bff;
3 color: #fff;
4}
5.button:hover {
6 background-color: #0056b3;
7}
8.button:active {
9 background-color: #003f7f;
10}巢狀媒體查詢
在SASS中，您也可以巢狀書寫媒體查詢。這樣可讓您在維持樣式關聯性的同時實現響應式設計。
1.container {
2 width: 100%;
3
4 @media (min-width: 768px) {
5 width: 750px;
6 }
7
8 @media (min-width: 1024px) {
9 width: 970px;
10 }
11}- 此程式碼在
.container類別內巢狀寫入媒體查詢，實現隨螢幕尺寸變化寬度的響應式設計。
產生的CSS
1.container {
2 width: 100%;
3}
4@media (min-width: 768px) {
5 .container {
6 width: 750px;
7 }
8}
9@media (min-width: 1024px) {
10 .container {
11 width: 970px;
12 }
13}巢狀語法須注意事項
過度巢狀會使程式碼結構過深，降低維護性。請避免像以下範例這樣過深的巢狀寫法。
1.header {
2 .nav {
3 ul {
4 li {
5 a {
6 color: red;
7 }
8 }
9 }
10 }
11}這種程式碼巢狀層級過深，因此可以按照以下方式重構。
1.header .nav ul li a {
2 color: red;
3}實用範例：導覽列
以下是使用SASS巢狀語法撰寫的導覽列樣式範例。
1.navbar {
2 background-color: #222;
3 color: #fff;
4
5 ul {
6 display: flex;
7 list-style: none;
8 margin: 0;
9 padding: 0;
10
11 li {
12 margin-right: 15px;
13
14 a {
15 color: #fff;
16 text-decoration: none;
17
18 &:hover {
19 text-decoration: underline;
20 }
21 }
22 }
23 }
24}- 這段程式碼運用SASS巢狀語法組織定義了導覽列內的清單和連結樣式，並包含滑鼠懸停效果。
產生的CSS
1.navbar {
2 background-color: #222;
3 color: #fff;
4}
5.navbar ul {
6 display: flex;
7 list-style: none;
8 margin: 0;
9 padding: 0;
10}
11.navbar ul li {
12 margin-right: 15px;
13}
14.navbar ul li a {
15 color: #fff;
16 text-decoration: none;
17}
18.navbar ul li a:hover {
19 text-decoration: underline;
20}總結
SASS的巢狀語法是一個可用來簡潔描述CSS層次結構並提升可讀性的強大工具。但請注意避免過度巢狀，應有條理地組織您的程式碼。
您可以在我們的 YouTube 頻道上使用 Visual Studio Code 來跟隨上述文章一起學習。 請也查看我們的 YouTube 頻道。