CSS预处理器

发表于 2025/02/03

作者 缇欧&咪西

3 分钟阅读

简介

MDN对CSS 预处理器的介绍是：

CSS 预处理器是一个能让你通过预处理器自己独有的语法来生成CSS的程序。

为什么要使用CSS 预处理器？

这大概源自于CSS本身的历史遗留问题，主要包括：

代码复用性低，难以组织和维护。
举个：使用CSS 预处理器时，我们可以通过一个“全局变量”规定多个属性的值。需要修改时，只要修改“变量值”，就能统一修改；
而在原生CSS中，你就要手动寻找要更改的所有属性，一个个的去手动更改值。改着改着就把自己给绕进去了。

CSS 本身可能很有趣，但样式表变得越来越大、越来越复杂并且更难维护。

CSS不像其它编程语言能够定义变量、常量、条件语句等，只是单纯地进行属性描述，写起来很费事，而且代码难以组织和维护。

……针对以上问题，CSS预处理器应运而生，专门用于实现让CSS能像一门编程语言一样可以做一些程序上的处理。

我们曾经面对 css 很多令人发指的不友好特性，也因为 css 的低复用性而刀耕火种。

具体而言，CSS 预处理器主要新增了：

嵌套

变量

mixin/继承

运算

模块化

Sass 有两种语法！

SCSS 语法 (.scss) 最常用。它是 CSS 的超集，这意味着所有有效的 CSS 也是有效的 SCSS。
缩进语法 (.sass) 更不寻常：它使用缩进而不是大括号来嵌套语句，并使用换行符而不是分号来分隔它们。我们所有的示例都可以使用两种语法。

说白了Scss就是Sass的升级版，其语法完全兼容 CSS3，并且继承了 Sass 的强大功能。

参考文章：

本文由作者按照 CC BY 4.0 进行授权