您不需要 CSS 預處理器

原生 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中文網其他相關文章！