Sass 面试问题

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 指令中，定义一个变量，其中包含列表中每个项目的 value。

它用于定义 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 编码名称”，Sass就会认为这是给定的字符编码。

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

Sass支持两种类型的注释：

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

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

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

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

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