原生 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。已经走过了很长一段路。
以上就是您不需要 CSS 预处理器的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1631545.html
微信扫一扫 
支付宝扫一扫 
