SASS 简介

SASS（Syntactically Awesome Stylesheet）是一个CSS预处理器，有助于减少CSS的重复，节省时间。 它是更稳定和强大的CSS扩展语言描述文档的风格结构。

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

在开发最初版本之后，Weizenbaum和Chris Eppstein继续通过SassScript来继续扩充Sass的功能。SassScript是一个在Sass文件中使用的小型脚本语言。

Sass是一个将脚本解析成CSS的脚本语言，即SassScript。Sass包括两套语法。最开始的语法叫做“缩进语法”，与Haml类似[3]，使用缩进来区分代码块，并且用回车将不同规则分隔开。

而较新的语法叫做“SCSS”，使用和CSS一样的块语法，即使用大括号将不同的规则分开，使用分号将具体的样式分开。通常情况下，这两套语法通过.sass和.scss两个文件扩展名区分开。

Sass是CSS预处理器之一，它能让你更好的、更轻松的工作。 Sass 以简为美，简约至上

Sass 对自己的定位首先是一个预处理器。其最主要的竞争对手包括 LESS，一个基于 Node.js 的预处理器，因著名 CSS 框架 Bootstrap 的使用而声名鹊起。

此外还有 Stylus ，一种对形式无所限制的 LESS 版本。它是一种无论怎样使用，大都能顺利转换成 CSS 的程序语言。

历史

它最初由 Hampton Catlin 设计，并于2006年由 Natalie Weizenbaum 开发。后来 Weizenbaum 和 Chris Eppstein 初始版本用SassScript扩展Sass。

为什么要使用SASS？

它是预处理语言，它为CSS提供缩进语法（它自己的语法）。

它提供了一些用于创建样式表的功能，允许更有效地编写代码和易于维护。

它是超集的CSS，这意味着它包含CSS的所有功能，是一个开源的预处理器，以 Ruby 编码。

它提供了比平面CSS好的结构格式的文档样式。 它使用可重复使用的方法，逻辑语句和一些内置函数，如颜色操作，数学和参数列表。

特征

• 它是更稳定，强大，与CSS的版本兼容。
• 它是超集的CSS和基于JavaScript。
• 它被称为CSS的语法糖，这意味着它使用户更容易阅读或表达的东西更清楚。
• 它使用自己的语法并编译为可读的CSS。
• 你可以在更少的时间内轻松地编写CSS代码。
• 它是一个开源的预处理器，被解释为CSS。

优点

• 它允许在编程结构中编写干净的CSS。
• 它有助于编写CSS更快。
• 它是CSS的超集，帮助设计师和开发人员更有效率和快速地工作。
• 由于Sass兼容所有版本的CSS，我们可以使用任何可用的CSS库。
• 可以使用嵌套语法和有用的函数，如颜色操作，数学和其他值。

缺点

开发人员需要时间了解此预处理器中存在的新功能。

如果更多的人在同一个网站上工作，那么将使用相同的预处理器。 有些人使用Sass，有些人使用CSS直接编辑文件。 因此，它将变得难以与现场工作。

有机会失去浏览器的内置元素检查器的好处。

Sass Or SCSS

Sass 最初定义的语法，其中决定性的特征是缩进敏感。很快，Sass 的维护者决定提供一个被称为 SCSS（Sassy CSS）的语法以弱化 Sass 和 CSS 之间的差异。

从那时起，Sass（预处理器）开始提供两种不同的语法：Sass（非全大写，please），也被称为缩进语法，和 SCSS。使用哪一种语法完全取决于你，两者在功能上是完全等同的，只是在审美上有所偏颇。

Sass 的空白敏感语法通过缩进以摆脱大括号、分号和其他符号，从而实现了简洁凝练的语法格式。与之相比，SCSS 则更容易学习，因为它只是在 CSS 上添加了一点点额外的功能。

我自己更喜欢 SCSS，因为它更接近 CSS 的原生面貌，对开发者来说具有友好性。因此，样式指南全文将使用 SCSS 而不是 Sass 语法格式来演示。你可以通过左侧的可选面板切换到 Sass 的缩进语法