您不需要 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 函数来完成此操作。
:root {
--spacing: 2em;
}
header {
margin-top: calc(var(--spacing) / 2);
}
这有多酷？
变换颜色
所以另一个流行的功能（至少对我来说）是在css预处理器中使颜色变亮和变暗。您现在可以在本机 css 中执行此操作，也可以使用颜色混合。
header {
background-color: color-mix(in oklab, red 50%, white);
}
上面的内容相当于您在预处理器中使用 lighten(red, 50%) 所做的事情。
要变暗，只需与黑色混合而不是白色
header {
background-color: color-mix(in oklab, red 50%, black);
}
我希望下次当你选择在项目中使用什么工具时，你会尝试一下原生 css。已经走过了很长一段路。