Sass - 面试问题

SASS（Syntropically 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 样式比 Expanded 和 Nested 占用的空间更少。它主要关注选择器而不是其属性。

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

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

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

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

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

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

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

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

• 属性的声明方式与 CSS 类似，但没有分号(;)。

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

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

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

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

sass 输入.scss 输出.css

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

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

• 使用@charset声明显式确定字符编码。只需在样式表的开头使用“@charset编码名称”，SASS就会假设这是给定的字符编码。

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

Sass 支持两种类型的注释 -

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

• 单行注释- 这些注释是使用//后跟注释编写的。CSS 输出中不保留单行注释。

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

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

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