原生 CSS 在最近幾個月/幾年裡取得了長足的進步。在這篇文章中，我將回顧人們使用 SASS、LESS 和 Stylus 等 css 預處理器的主要原因，並向您展示如何使用原生 CSS 完成這些相同的事情。
分離檔案是人們使用預處理器的主要原因之一。儘管您已經能夠將另一個文件匯入到 CSS 文件中已經有一段時間了。看起來像這樣。
@import url("./utils.css");
您可以使用相對或絕對路徑，就像錨標記或任何其他資源上的 href 一樣。
這個預處理器之間的主要區別在於，雖然預處理器會在編譯時組合 then，但 CSS 將在運行時發出 http 請求。
好吧，這是使用預處理器的主要原因。至少這是我過去使用它的主要原因。
但是 CSS 現在支援嵌套，而且它的工作方式主要是您習慣使用預處理器的方式。
header {
h1 {
font-weight: bold;
}
h2 {
font-weight: normal;
}
}
太棒了，像是我們幾十年來寫 CSS 的巨大優勢。
header h1 {
font-weight: bold;
}
header h2 {
font-weight: normal;
}
Sudo 選擇器在本機 CSS 中的運作方式與您可能習慣的預處理器相同。
button {
color: blue;
&:hover {
color: purple;
}
}
您可以在 MDN 上閱讀更多關於巢狀的資訊。
預處理器長期以來的一個原因是變數。您可以將所有顏色、間距等保存在一個檔案中，並在各處進行全域更新。
現在你可以在原生 CSS 中做到這一點，一段時間。事實上，它在很多方面都比預處理器更好。
全域變數包含在 :root 規則中。這些可以在任何地方引用。
:root {
--bg-color: #333;
}
要使用變量，必須使用 var 標籤來引用
button {
background-color: var(--bg-color);
}
您也可以在選擇器上設定變數的範圍，例如...
header {
--bg-color: #999;
}
所以在這種情況下，引用 var(--bg-color);在標頭選擇器中將導致 #999;
因此，CSS 變數相對於預處理器的主要優點是它們可以在運行時被覆蓋，而預處理器一旦編譯，它就是永久性的。
例如，如果您有一個網站想要支援淺色和深色模式。使用 css 變數可以非常輕鬆地實現這一點。
:root {
--bg-color: white;
}
body {
background-color: var(--bg-color);
}
@media (prefers-color-scheme: dark) {
:root {
--bg-color: black;
}
}
要使用預處理器實現類似的功能，您需要使用 Javascript 在主體上切換類，並使用 .dark 類或類似內容覆蓋所有規則。
大多數預處理器（例如 LESS、Stylus 或 SASS）都可以讓您對事物進行數學運算。就像你想把一個變數分成兩半等等。
您可以在原生 CSS 中使用 calc 函數來完成此操作。
@import url("./utils.css");
這有多酷？
所以另一個流行的功能（至少對我來說）是在CSS預處理器中使顏色變亮和變暗。現在您可以在本機 CSS 中執行此操作，也可以使用顏色混合。
header {
h1 {
font-weight: bold;
}
h2 {
font-weight: normal;
}
}
上面的內容相當於您在預處理器中使用 lighten(red, 50%) 所做的事情。
要變暗，只需與黑色混合而不是白色
header h1 {
font-weight: bold;
}
header h2 {
font-weight: normal;
}
我希望下次你選擇在專案中使用什麼工具時，你會嘗試原生 CSS。已經走過很長一段路了。
以上是您不需要 CSS 預處理器的詳細內容。更多資訊請關注PHP中文網其他相關文章！
