Sass 已成為本地安裝的強大預處理器，十多年來構成了我的專案的支柱。它使我能夠有效地組織可擴展且穩定的 CSS 包。即使在今天，我仍然認為 Sass 是一個非常強大的工具。然而，當我們步入 2024 年時，不可否認 CSS 已經經歷了快速發展。曾經是 Sass 獨有的功能現在已原生整合到 CSS 中，包括變數和最新亮點：CSS 嵌套。
變數
長期以來，定義變數一直被視為 SCSS 的獨特優勢，它允許集中管理許多屬性，這是 CSS 長期以來非常缺少的功能。然而如今，變數也可以以類似 Sass 的方式在 CSS 中定義。然而，一個顯著的差異是，Sass 變數只存在於預處理器上下文中，而 CSS 變數可以在瀏覽器中使用，甚至可以透過 JavaScript 動態覆寫。
:root {
--button-padding: 10px 20px;
--button-bg-color: #007bff;
--button-text-color: #ffffff;
--button-border-radius: 8px;
}
.button {
padding: var(--button-padding);
background-color: var(--button-bg-color);
color: var(--button-text-color);
border-radius: var(--button-border-radius);
border: none;
cursor: pointer;
transition: background-color 0.3s;
}
CSS 嵌套
在另一個元素中定義一個元素的樣式規則的能力大大簡化了 CSS 的編寫。嵌套允許將這些選擇器分組到父選擇器中，而不是對從屬元素或偽選擇器重複使用相同的選擇器。這種技術可以產生清晰的、層次結構的、因而更有效率的程式碼庫。
隨著瀏覽器對 CSS 巢狀的支援率超過 84%，對巢狀選擇器的支援率超過 86%，這種技術變得越來越容易使用。
.blog {
position: relative;
padding: 1rem;
background: var(--neutral-100);
.blog-item {
border: 1px solid var(--neutral-200);
& span {
font-size: 1rem;
}
}
}
:is 偽類
:is偽類透過接受選擇器清單並對與這些選擇器中的任何一個匹配的所有元素進行樣式設置，徹底改變了選擇器概念。這大大方便了 DOM 中元素的選擇和樣式設定。
:is(selector1, selector2, selector3) {
/* styles */
}
您可以使用 :is() 來提高可讀性，同時避免使用長選擇器，而不是使用長選擇器清單。
: has() 偽類
CSS 偽類:has()提供了一種基於其後代選擇元素的強大方法，類似於條件樣式的應用。
.hero:has(.hero-button) {
background-color: var(--accent-50);
}
容器查詢
容器查詢被認為是自 CSS3 以來網頁設計最重要的創新。他們透過允許元素根據容器的大小進行調整來擴展響應式設計的概念。該技術使元素的設計能夠根據上下文動態變化，從而實現更靈活和更具適應性的設計。
.component {
--theme: dark;
container-name: fancy;
}
@container fancy style(--theme: dark) {
.fancy {
/* dark styles. */
}
}
@container (min-width: 720px) {
.headline {
font-size: 2em;
}
}
如果容器有變數 --theme: dark，請加入以下 CSS。
級聯層
使用級聯層，我們可以透過分配自己的層（layer）來避免類別、ID等的嵌套，以獲得更高的特異性。使用@layer at-rule 和分層@imports ，我們可以建立自己的級聯層- 從低優先樣式（如重設和預設值），透過主題、框架和設計系統，到最高優先樣式（如元件、實用程式） ，並覆蓋。級聯層提供更多控制。
@layer utilities {
.button {
padding: 0.5rem;
}
.button--lg {
padding: 0.8rem;
}
}
SASS 的未來
這是否意味著 Sass 已經過時了？一點也不。 Mixins和函數，例如像素到rem的轉換，仍然是Sass不可替代的優勢。儘管如此，我還是決定在我的大部分專案中放棄 Sass。相反，我在 Sublime 編輯器中使用預先定義的程式碼區塊和套件，這顯著改善了我的工作流程。
再見sass？
我堅信，到 2024 年，Sass 的好處，包括安裝、使用和編譯問題，將不再證明其使用的合理性。現代 CSS 的可擴展性和用戶友好性使得無需額外工具即可完成。
我的 Themex 專案展示了新 CSS 功能的組合有多強大：https://app.themexproject.com
隨著 CSS 的進步，我期待直接、直接地實施小型和大型專案。
再見sass，謝謝你！
原文出處：https://dev.to/karsten_biedermann/goodbye-sass-welcome-back-native-css-cf
超猛的，原生 css 已經變很強了！