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

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

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

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

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

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

Sass 基础教程——预处理器_CSS

教程第一篇我们提到了为什么要使用 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，也是我们本系列教程用到的版本。

Sass 基础教程——预处理器_sass_02

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

  • Less：
  • Stylus
  • PostCSS

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

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