您不需要 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。已经走过了很长一段路。

以上就是您不需要 CSS 预处理器的详细内容，更多请关注慧达安全导航其它相关文章！