CSS 预处理器是一种脚本语言，它充当使用现代编程语言方法的默认 CSS 功能的扩展。

定义 CSS 预处理器

超文本标记语言或HTML一直是在网页上放置结构和内容的标准标记语言。多年来，它已经从基于表格样式结构的标记发展到详细的基于分区样式结构的标记，我们现在称之为HTML5。随着新版本的出现，新的语义元素也随之而来，这些元素是为许多Web开发人员的利益而添加的。所有主流现代浏览器都支持这些语义元素，并涵盖网页内容的许多方面，例如图形、媒体和表单。

不用说，如果没有CSS，HTML会很沉闷。不可能想象不使用CSS的现代网页设计是如何展开的。级联样式表或CSS是负责添加网站设计或外观的样式表语言。它使网页内容比纯文本和内容更引人入胜。CSS 规则涵盖了设计的许多方面，例如更改元素的颜色和位置以及向网页添加创意动画。像HTML一样，CSS也从简单的基于表格的CSS规则到制作响应式元素等等，现在被称为CSS3。

然而，这些新规则增加了CSS代码的复杂性，使得有时维护起来更具挑战性。除了适应新的复杂CSS属性之外，开发人员还会多次编写重复的CSS代码，这可能效率低下且耗时。对于CSS专家来说，编写功能性CSS代码将是优先事项，其次是代码可读性。

随着您添加更多的 CSS 代码，CSS 文件会随着开发过程的推进而增长并变得杂乱无章。CSS 本身受到限制，并且没有合并样式和值的默认功能，因此几乎不可能减少常见样式和抽象代码的重复。

CSS 还取决于浏览器功能;并非所有浏览器都支持所有 CSS 功能。例如，很难在每个浏览器中显示没有供应商前缀的CSS代码的相同网页内容。此外，您不能仅使用普通的CSS代码来定义变量，执行数学运算和使用有用的函数。这就是CSS预处理器进入框架的地方。

什么是 CSS 预处理器？

CSS 预处理器是一种脚本语言，它充当使用现代编程语言方法的默认 CSS 功能的扩展。它允许您使用编程概念，例如变量、操作、函数、继承和选择器嵌套规则，同时编写常规 CSS 语法并强制执行 DRY（不要重复自己）概念，这可以防止代码中的重复任务。每个CSS预处理器都有自己的代码语法编写方式，然后将其编译为常规CSS。

流行的CSS预处理器之间的区别

CSS 预处理器充当预处理器文件和编译的 CSS 代码的中介，然后显示在客户端。一些 Web 开发人员认为预处理器只会给他们的工作流程增加额外的工作，而且很耗时。但实际上，大多数 CSS 预处理器可以使在 CSS 文件上编写代码的过程更快、更高效，而不会以可维护的方式中断您的工作流程。

事实上，一些流行的商业技术巨头，如Airbnb，eBay和BBC，已经采用了CSS预处理器的方法，在其生产中编写和维护CSS代码。仔细了解每个流行的 CSS 预处理器后，您将了解它在自动执行重复性任务和维护 CSS 代码和文件方面如何派上用场。

到目前为止，有五个最流行的CSS预处理器可用，包括两个最古老的CSS预处理器：Sass和Less。这些CSS处理器中的每一个都是独一无二的，并且还定期与其他一些流行的前端框架集成。选择哪一个可以为你工作不是火箭科学，但认识到他们的语法如何工作和生态系统将有所作为。

使用 CSS 预处理器的原因

实际上，一些开发人员仍在手动编写样式表。有些人问的常见问题是，如果CSS预处理器最终只是编译普通的CSS，为什么不首先编写CSS？虽然这个问题可能有道理，但它仍然不完全准确。作为开发人员，您仍然可以在手动搜索 CSS 文件、继续重复任务和创建臃肿的 CSS 文件时手动修复所有布局和设计问题。

CSS 使用声明式编程类型。您在样式表上写的任何内容都由浏览器直接使用，这可以立即成就或破坏您的网页设计。样式表本质上通常是重复的，因为CSS文件本质上是线性文档。这可能会导致开发人员在编写代码时出现错误和混淆。

CSS 预处理器不会让 CSS 开箱即用。如果你对CSS代码和语法的工作原理没有适当的了解，它将无法填补你的工作流程和代码理解之间的空白。但是，CSS 预处理器可以帮助您以有组织和可维护的方式更快、更高效地编写 CSS 代码。

以下是您应该在工作流中使用 CSS 预处理器的一些主要原因：

它遵循DRY（不要重复自己）原则。CSS 代码中的冗余经常会失败。CSS文件将包含重复的样式，声明和值，可以使用CSS预处理器有效地组织和解决。

总结

CSS 预处理器使开发人员的工作更轻松、更有条理且可维护。使用像 Sass 和 Less 这样的 CSS 预处理器意味着您不局限于 CSS 可以提供的功能。它不会取代 CSS，而是通过提供与编程相关的概念（如变量、函数和嵌套规则）来增强普通的 CSS 语法。

对于本文中提到的所有可用的 CSS 预处理器，建议选择适用于您当前项目和您当前使用的技术的预处理器。