Sass简介

Posted 2020-12-11 lovevin

1. Sass 来源

Sass 来源于 css，在早期前端页面是由设计师来制作的时候，css 是设计师使用的网页样式设计语言，没有变量、条件判断和循环等典型的编程语言的特点。因此 css 和 html 一样都不是一门编程语言。

随着前端开发工程师的出现，网页开发开始由专业人员负责，前端开发工程师都是程序员，因此在使用 css 时感觉相当麻烦，因此后来就有人为 css 加入编程元素，使之支持变量、函数等。使得 css 看起来更像是一门编程语言，这样设计后的语言称之为 Sass。

严格来说，Sass 并不是一门语言，Sass 是一种 css 预处理器，基本设计思路就是，使用添加了编程元素后的语法编写样式，然后由 Sass 工具将其编译成正常的 css 文件。

css 预处理器不止 Sass 一个，有很多，不同的预处理器的思路是一样的，只不过语法不一样。

2. Sass 和 Scss

了解了 Sass 的来源，你可能也听说过 Scss。那这两个有什么区别呢？

其实 Sass 和 Scss 都是 Sass。只是由于 Sass 的版本问题衍生的两个语法。Sass 是最早期的语法规定，Sass 语法和原生的 css 语法出入较大，在 Sass 语法中，没有分号（;），没有花括号（{），Sass 语法是由严格的缩进格式进行控制的。因此，早期的 Sass 语法不是特别被接受，也不被常用。到后来，Sass 又在 css3 的基础上进项扩展，这次的 Sass 语法设计与以往完全不同，其语法格式完全兼容 css3 语法，即支持分号（;）和花括号（{），也就是说开发者在使用 Sass 语法时，完全可以使用 css 语法。Sass 这次语法设计的历史性转折，让 Sass 被大众所喜爱。Sass 为这种新的语法命名为 Scss。

所以，Sass 有两种语法，一个是早期的严格缩进格式的 Sass语法，另一个是最新的兼容 css语法 的 Scss语法。两种语法下的文件后缀名也不一样，Sass 语法下的后缀名为 .sass，Scss 语法下的后缀名为 .scss。