Sass 基础教程——预处理器

feelang

已于 2022-10-20 17:42:13 修改

阅读量673

点赞数

CC 4.0 BY-SA版权

分类专栏： CSS Sass 基础教程文章标签： sass css 前端

于 2022-10-20 11:45:36 首次发布

本文链接：https://blog.youkuaiyun.com/FeeLang/article/details/127404561

31 篇文章

订阅专栏

4 篇文章

订阅专栏

本文深入探讨Sass作为CSS预处理器的角色，解释预处理器的工作原理，并介绍了Sass的演变历程，包括RubySass、LibSass到DartSass的转变。此外，还提及了Sass的竞争对手如Less和Stylus。下篇将聚焦Sass的表达式和函数。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本篇主要介绍 Sass 的语法，需要一定的 CSS 知识，对 CSS 不熟悉的同学可参考我之前写的系列教程：

CSS入门篇
CSS进阶篇
CSS高级篇

前面的教程已经介绍过，Sass 不但指是一种 CSS 的扩展语言，同时也是一个预处理器，它可以将 Sass/SCSS 语法写成的脚本转化成相应的 CSS 代码。

上一篇我们介绍了 Sass 作为扩展语言的基本语法，这一篇来介绍一下什么是预处理器。

预处理器的英文是 preprocessor，也叫预编译器 precompiler，可以理解成是一个应用程序（program），它接收输入数据，输出处理结果，这个输出结果还可以给继续给其他应用程序使用。

具体到 Sass 预处理器，它的输入是 Sass/SCSS 语法格式的代码，输出的是可以直接被浏览器使用的 CSS 代码。
sass preprocessor

教程第一篇我们提到了为什么要使用 Sass，这里再简单重复一下：CSS 的全称是级联样式表(Cascading Style Sheet)，它本身的语法极其简单，没什么扩展性可言，所以易用性和可维护性都有问题。

为了解决这个痛点，有开发者引入脚本语言的特性——变量、循环和函数等——来编写样式代码，于是便有了 Sass 的第一个版本。

但是这个脚本语言写成的样式表，并不能直接在浏览器中运行，必须转化成 CSS 才可以，实现这个转换的便是预处理器。

所以，当我们讨论 Sass 时，语法是一方面，预处理器也要包含在内。

Sass 最初的作者叫 Hampton Lintorn-Catlin，也是脚本语言的 Haml 的作者，所以 Sass 最初的语法和 Haml 非常相似，采用缩进式来区分代码区块（bloc），用换行来区分声明（statement）。

Sass 刚出来的时候是 2006 年，那时候 Web 领域最流行的语言恐怕要数 Ruby，就连 Sass 的第一个预处理器也是 Ruby 写成的，叫 Ruby Sass，而 Haml 也是借鉴了 Ruby 的语法。

这个版本的 Sass 语法一般称为 Sass，后来经过社区的不断努力，引入了新的语法，叫 SCSS，全称 Sassy CSS，预处理器也从 Ruby Sass，经过 LibSass，最终升级到了现在的 Dart Sass，也是我们本系列教程用到的版本。

two sass syntaxes

那么除了 Sass 还有没有其他的 CSS 处理器呢？答案是肯定的。

当然还有一些更小众的预处理器，这里就不介绍了。

下一篇介绍 Sass 的表达式和函数。