Sass 基础教程——预处理器

Posted 2022-12-01 feelang

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

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

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

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

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

具体到 Sass 预处理器，它的输入是 Sass/SCSS 语法格式的代码，输出的是可以直接被浏览器使用的 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 还有没有其他的 CSS 处理器呢？答案是肯定的。

• Less：
  
• Stylus
  
• PostCSS
  

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

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