Sass（Syntactically Awesome Stylesheet）是一种CSS预处理器，有助于减少CSS中的重复并节省时间。它是一种更稳定、更强大的CSS扩展语言，能够清晰、结构化地描述文档样式。

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

• 它允许更高效地编写代码且易于维护。

• 它是CSS的超集，包含CSS的所有功能，是一个用Ruby编写的开源预处理器。

• 它以良好的结构格式提供文档样式，比扁平的CSS更好。

• 它使用可重用的方法、逻辑语句以及一些内置函数，如颜色操作、数学运算和参数列表。

• 它更稳定、功能强大，并且与CSS版本兼容。

• 它是CSS的超集，基于JavaScript。

• 它被称为CSS的语法糖，这意味着它使用户更容易阅读或更清晰地表达事物。

• 它使用自己的语法并编译为可读的CSS。

• 您可以用更少的代码在更短的时间内编写CSS。

• 它是一个被解释为CSS的开源预处理器。

• 它允许在编程结构中编写干净的CSS。

• 它有助于更快地编写CSS。

• 它是CSS的超集，帮助设计师和开发人员更高效、更快地工作。

• 由于Sass与所有CSS版本兼容，我们可以使用任何可用的CSS库。

• 可以使用嵌套语法以及有用的函数，如颜色操作、数学运算和其他值。

• 开发人员需要时间学习此预处理器中的新功能。

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

• 可能会失去浏览器内置元素检查器的优势。

Sass支持两种语法，即SCSS和缩进语法。

• SCSS（Sassy CSS）是CSS语法的扩展，使维护大型样式表更容易，并且可以识别特定于供应商的语法和许多CSS。SCSS文件使用扩展名.scss。

• 缩进是一种较旧的语法，有时简称为Sass。使用这种语法形式，可以简洁地编写CSS。SASS文件使用扩展名.sass。

您可以通过三种不同的方式使用Sass：

• 作为命令行工具

• 作为Ruby模块

• 作为Rack框架的插件

嵌套是组合不同逻辑结构的过程。使用Sass，我们可以在彼此内部组合多个CSS规则。如果您使用多个选择器，则可以在另一个选择器内部使用一个选择器来创建复合选择器。

您可以使用&字符选择父选择器。它指示应插入父选择器的位置。

Sass使用类或ID选择器支持占位符选择器。在普通CSS中，这些用#或.指定，但在Sass中，它们被替换为%。

有5种操作类型：

• 数字操作

• 颜色操作

• 字符串操作

• 布尔操作

• 列表操作

它允许进行数学运算，如加法、减法、乘法和除法。

它允许使用颜色组件以及算术运算。

列表表示一系列用逗号或空格分隔的值。

您可以使用and、or和not运算符在Sass脚本中执行布尔操作。

括号是一对符号，通常用圆括号()或方括号[]标记，它们提供影响操作顺序的符号逻辑。

它使用#{ }语法在选择器和属性名称中提供SassScript变量。您可以在花括号内指定变量或属性名称。

您可以通过在变量值末尾添加!default标志来设置变量的默认值。如果值已分配给变量，则不会重新分配该值。

它直接获取要导入的文件名，所有导入的文件将组合在一个CSS文件中。

它为不同的媒体类型设置样式规则。

它用于在选择器之间共享规则和关系。它可以扩展一个类中的所有其他类样式，并可以应用自己的特定样式。

它是一组嵌套规则，能够在文档根目录创建样式块。

它用于根据评估表达式的结果有选择地执行代码语句。

@else if语句与@if指令一起使用，每当@if语句失败时，将尝试@else if语句，如果它们也失败，则执行@else。

它允许您在循环中生成样式。计数器变量用于设置每次迭代的输出。

在@each指令中，定义了一个变量，该变量包含列表中每个项目的值。

它用于定义mixin，包括mixin名称后可选的变量和参数。

它用于在文档中包含mixin，mixin定义的样式可以包含在当前规则中。

SassScript值可以作为mixin中的参数，这些参数在包含mixin时提供，并在mixin内可用作变量。

有两种类型的mixin参数：

• 关键字参数

• 变量参数

它用于在mixin中包含参数。命名的参数可以按任何顺序传递，并且可以省略参数的默认值。

变量参数用于将任意数量的参数传递给mixin。它包含传递给函数或mixin的关键字参数。

使用函数指令，您可以创建自己的函数并在脚本上下文中使用它们，或者与任何值一起使用。

Sass生成的CSS文件包含默认的CSS样式，该样式反映文档的结构。默认的CSS样式很好，但可能不适合所有情况。

嵌套样式是Sass的默认样式。当您处理大型CSS文件时，这种样式非常有用。

在扩展输出样式中，每个属性和规则都有自己的行。与嵌套CSS样式相比，它占用更多空间。

紧凑CSS样式比扩展和嵌套样式占用更少的空间。它主要关注选择器而不是其属性。

压缩CSS样式比所有其他样式占用最少的空间。它仅提供空格来分隔选择器，并在文件末尾提供换行符。

• 它使用缩进而不是{和}来分隔块。

• 为了分隔语句，它使用换行符而不是分号(;)。

• 属性声明和选择器必须放在自己的行上，而{和}内的语句必须放在新行上并缩进。

CSS属性可以通过两种方式声明：

• 属性可以类似于CSS声明，但没有分号(;)。

• 冒号(:)将作为每个属性名称的前缀。

您可以使用=表示@mixin指令，+表示@include指令，这需要更少的输入，使您的代码更简单、更易读。

sass --watch C:\ruby\lib\sass\style.scss:style.css

注释占用整行并包含嵌套在其下的所有文本，在缩进语法中它们是基于行的。

sass input.scss output.css

• 首先检查Unicode字节，然后是@charset声明，最后是Ruby字符串编码。

• 接下来，如果没有设置任何内容，则将字符编码视为UTF-8。

• 通过使用@charset声明明确确定字符编码。只需在样式表开头使用"@charset encoding name"，Sass将假定这是给定的字符编码。

• 如果Sass的输出文件包含非ASCII字符，它将使用@charset声明。

Sass支持两种类型的注释：

• 多行注释 - 使用/*和*/编写。多行注释保留在CSS输出中。

• 单行注释 - 使用//后跟注释编写。单行注释不会保留在CSS输出中。

它使用命令行评估SassScript表达式。您可以使用sass命令行和-i选项运行shell。

它检测错误并将SassScript表达式值显示到标准错误输出流。

它将SassScript表达式值显示为致命错误。