原生 CSS 和 Sass 嵌套之間的區別
自推出以來，CSS 一直頑固地拒絕支持嵌套選擇器的語法。另一種選擇是使用 Sass 等 CSS 預處理器。但如今，嵌套已正式成為原生 CSS 的一部分。您可以直接在現代瀏覽器中嘗試此功能。
從 Sass 過渡到原生 CSS 時，必須注意每種語法所使用的嵌套約定的差異。這些區別可能會對您的代碼結構和整體風格產生相當大的影響，因此在進行轉換之前必須熟悉這些差異。
在原生 CSS 中，您需要將“&”與元素選擇器一起使用
CSS 嵌套仍然是一個草案規範，具有不同的瀏覽器支持。請務必檢查 caniuse.com 等網站以獲取最新信息。
以下是可以在 Sass 中使用 SCSS 語法使用的嵌套結構類型的演示:
.nav {
ul { display: flex; }
a { color: black; }
}
給定的代碼片段涉及 HTML 文檔導航欄的樣式規則。具體來說，它規定包含在帶有“nav”類的元素內的任何有序列表都將以靈活的（列）對齊方式顯示。此外，它還要求此類元素中出現的任何超鏈接文本必須為黑色。
在 Native CSS 中，上述的嵌套形式被認為是不可接受的。為了使該結構有效地發揮作用，必須在每個封閉元素前面添加與號 (&)，如下所示:
.nav {
& ul { display: flex; }
& a { color: black; }
}
在最近的修訂之前，層疊樣式表 (CSS) 的初始迭代不允許封裝類型選擇器。然而，隨著最新的調整，現在可以在包含類型選擇器時省略符號“&”的使用。儘管如此，用戶應該意識到，谷歌 Chrome 和 Apple Safari 等較舊的網絡瀏覽器迭代可能仍然缺乏與此修訂後的方法的兼容性。
如果選擇器以符號開頭（例如類選擇器），則在編寫 CSS 或 Sass 代碼時允許排除 & 符號。這意味著所提供的語法將在傳統 CSS 和 Sass 中正確運行。
.nav {
.nav-list { display: flex; }
.nav-link { color: black; }
}
你不能在原生 CSS 中使用“&”創建新的選擇器
您可能會欣賞的 Sass 吸引人的方面之一是它能夠通過如下所示的結構來促進代碼生成:
.nav {
&-list { display: flex; }
&-link { color: black; }
}
上述 Sass 代碼在編譯後會產生後續未處理的 CSS 輸出:
.nav-list {
display: flex;
}
.nav-link {
color: black;
}
在標準 CSS 中，不支持使用“&”符號創建新選擇器。然而，當使用 Sass 時，編譯器有效地用封閉元素（例如“.nav”）替換“&”，從而避免形成不正確的複合選擇器，該複合選擇器會產生與預期結果不同的結果。
此代碼實例應使用本機 CSS 語法正確運行:
.nav {
&.nav-list { display: flex; }
&.nav-link { color: black; }
}
所提供的代碼之所以有效，是因為其中使用的選擇器之間的對應關係。第一個選擇器匹配類名稱為“nav-list”或“nav-link”的元素，而第二個選擇器專門針對類名稱為“nav-link”的元素。在“&”符號和後續選擇器（例如“nav.nav-list”）之間放置空格將導致無效語法錯誤，因為它將創建一個由“nav”和“.nav-”組成的新組list”類，而不是定位擁有這兩個類的元素。
在 CSS 原生中，以下面演示的方式使用 & 符號將導致語義錯誤:
.nav {
&__nav-list { display: flex; }
&__nav-link { color: black; }
}
和這樣寫是一樣的:
__nav-list.nav {
display: flex;
}
__nav-link.nav {
color: black;
}
考慮到“ ”和“ ”元素都位於“.nav ”選擇器中，這可能會令人意外。但是，與號 (&) 有效地將嵌套元素定位在其父元素之前。
特異性可能不同
值得一提的是，與標準 CSS 中的對應語法相比，Sass 嵌套語法對精度的影響值得關注。
事實上，假設在其 HTML 結構中同時具有 main 元素和 Article 元素，利用提供的 CSS 樣式將導致這些相應元素中包含的任何 h2 標籤都以襯線字體呈現。
#main, article {
h2 {
font-family: serif;
}
}
從上述 Sass 代碼生成的 CSS 如下所示:
#main h2,
article h2 {
font-family: serif;
}
與在原生 CSS 中使用嵌套選擇器相比，通過相同語法使用等效結構將產生類似的結果。
:is(#main, article) h2 {
font-family: serif;
}
LESS 中的“is()”選擇器在處理特殊性規則方面與 Sass 中的對應選擇器略有不同。特別是，當使用 :is() 時，選擇器的特異性會自動提升為所提供參數列表中最具體元素的特異性。
元素的順序可能會改變所選元素
原生 CSS 中的嵌套行為有可能改變給定選擇器的預期含義，最終選擇一個完全不同的元素。
例如，考慮以下 HTML:
<div class="dark-theme">
<div class="call-to-action">
<div class="heading"> Hello </div>
</div>
</div>
以及以下 CSS:
body { font-size: 5rem; }
.call-to-action .heading {
.dark-theme & {
padding: 0.25rem;
background: hsl(42, 72%, 61%);
color: #111;
}
}
使用 Sass 作為 CSS 預處理器會產生以下結果:
在 HTML 上下文中，如果帶有“dark-theme”類名稱的 `` 元素被插入到由“call-to-action”分類表示的父容器中，Sass（一個 CSS 預處理器）採用的結果選擇標準）將變得功能失調。然而，在傳統的 CSS 約定下（即不求助於 CSS 預處理器），相關的樣式屬性將保持不變且有效。
該行為源於“:is()”偽類內部操作的方式，導致生成如下所示的後續未修飾的 CSS 表示形式:
.dark-theme :is(.call-to-action .heading) {
/* CSS code */
}
有問題的標題是“.dark-theme”元素和“.call-to-action”元素的後代，但它們的特定順序不會影響其功能。只要標題是兩個元素的後代，它們是否按特定順序都不會影響結果。
在這個特定場景中，它構成了一個不太常見的實例，但是理解:is() 選擇器的內在機制可以提高人們對 CSS 中嵌套元素的熟練程度。此外，這些知識有助於更有效地解決 CSS 問題。
學習如何在 React 中使用 Sass
由於 Sass 能夠編譯為 CSS，因此它與廣泛的 UI 框架兼容，因為它幾乎與任何此類框架兼容。它可以輕鬆地安裝在 Vue、Preact、Svelte 和 React 等各種平台中，提供跨不同技術的無縫集成體驗。
在 React 環境中使用 Sass 有幾個優點，特別是通過變量和 mixin 的實現來製作組織良好且可重用的樣式的能力。熟練掌握這項技術可以顯著提高一個人編寫精緻且資源豐富的代碼的能力，最終促進 React 開發人員的專業成長。