什么是Sass？

Posted 2021-10-15 知否

什么是Sass

Sass 是 Syntactically Awesome Stylesheets 的简写，是一个最初由 Hampton Catlin 设计并由 Natalie Weizenbaum 开发的层叠样式表语言。

Sass 是一个将脚本解析成 CSS 的脚本语言（SassScript），也是一款 CSS 预处理器，它减少了 CSS 的重复，也因此节省了时间。Sass 是最早的 CSS 预处理语言，有比 Less 更强大的功能。Sass 扩展了 CSS3，增加了规则、变量、混入选择器、继承等特性。

什么是 CSS 预处理器

我们知道了 Sass 是 CSS 的预处理器，那么什么是预处理器呢？CSS 预处理器定义了一种新的语言，其基本思想是，用一种专门的编程语言，为 CSS 增加了一些编程的特性，将 CSS 作为目标生成文件，然后开发者就只要使用这种语言进行编码工作。也就是说，CSS 预处理器用一种专门的编程语言，进行 Web 页面样式设计，然后再编译成正常的 CSS 文件，以供项目使用。CSS 预处理器为 CSS 增加一些编程的特性，无需考虑浏览器的兼容性问题。

Sass的特色功能

• Sass 完全兼容所有版本的 CSS。
• Sass 拥有比其他任何 CSS 扩展语言更多的功能和特性，例如增加了变量、嵌套、混合等功能。
• 通过函数进行颜色值与属性值的运算。
• 提供了控制指令（control directives）。
• 自定义输出格式。

语法格式

Sass 语言有两种语法格式：

• 最开始的语法叫做缩进语法（Indented Sass），通常简称为Sass，是一种简化格式。它使用缩进来代替花括号 {} ，表示属性属于某个选择器。用换行代替分号分隔属性。
• 另一种语法是 SCSS（Sassy CSS），这种格式仅在 CSS3 语法的基础上进行拓展，所有 CSS3 语法在 SCSS 中都是通用的，同时加入 Sass 的特色功能。

这两种语法格式，任何一种格式都可以直接通过 @import 导入到另一种格式中使用，或者通过 sass-convert 命令行工具转换成另一种格式：

// Sass转为SCSS
$ sass-convert style.sass style.scss

// SCSS转为Sass
$ sass-convert style.scss style.sass

Sass特性

• 变量：Sass 中支持定义变量，变量以美元符号 $ 作为开头，然后通过冒号 : 赋值。变量支持四种数据类型，分别为字符串、数值、布尔类型、颜色值。
• 嵌套（Nesting）：SCSS 支持嵌套并且支持代码块的嵌套，它可以清晰的表示元素之间的关系。
• 导入（@import）：Sass 支持 @import 指令，该指令允许我们将一个文件的内容导入到另一个文件中。该指令包含 CSS 文件，因此不需要额外的调用 HTTP，而由于性能问题，CSS 指令每次调用都会创建一个额外的HTTP，在这里 Sass 就没有这样的问题。
• 混入（mixin）：Sass 中可以使用 @mixin 来声明混合，混合中包含一段合法 Sass 代码，类似于 C 语言的宏定义，解释器在调用混合时会将它扩展成它所包含的完整 Sass 代码，可以有效的减少代码重复，从而写出的代码更加干净简洁。
• 继承（@extend）：该指令允许我们将一组 CSS 属性从一个选择器共享到另一个选择器。