SASS 面试题

下面是经常问到的 SASS 面试问题及答案列表。

1) 定义 SASS？

SASS 的意思是 Syntactically Awesome Style sheets（语法上很棒的样式表）。它是一种 CSS 预处理器，用于减少 CSS 中的重复并节省时间。它为基础语言增加了功能和优雅性，允许您添加变量、嵌套规则、混合（mixin）、内联导入、继承等，所有这些都采用完全兼容 CSS 的语法。

2) SASS 的发明者是谁？

SASS 由 Natalie Weizenbaum 开发，并由 Hampton Catlin 设计。因此，Hampton Catlin 被认为是 SASS 的设计者，他也被称为 SASS 之父。

3) 使用 SASS 的原因是什么？

以下是 SASS 流行的一些重要原因。

• 您可以轻松高效地编写代码，并且易于维护。
• 它是一种预处理语言，为 CSS 提供了自己的语法。
• 它是 CSS 的超集，包含 CSS 的所有功能，并且是一个开源的预处理器，用 Ruby 编写。
• 它是一种更稳定、更强大的 CSS 扩展，可以更清晰、更有条理地样式化文档。
• 它提供了可重用方法、逻辑语句以及一些内置函数，如颜色处理、数学运算和参数列表项。

4) 我们有哪几种方式可以使用 SASS？

我们可以通过三种不同的方式使用 SASS：

• 作为命令行工具。
• 作为独立的 Ruby 模块。
• 作为任何支持 Rack 的框架的插件。

5) SASS 最吸引人的特性是什么？

• 它更稳定、更强大，并且完全兼容 CSS3。
• 它节省时间，因为它允许您用更少的代码编写 CSS。
• 它使用自己的语法。
• 它基于 JavaScript，是 CSS 的超集。
• 它是一个开源的预处理器，可以编译成 CSS。
• 它包含各种用于处理颜色和其他值的函数。
• 它具有用于库的高级控制指令。
• 它提供格式良好、可自定义的输出。

6) Sass Script 支持哪些数据类型？

Sass Script 支持以下数据类型：

• 布尔值（真或假）
• 数字（1、5、13、10px）
• Nulls（空值）
• 颜色（red、#FF0000）
• 文本字符串，不带引号（"foo"、"bar"）
• 由逗号或空格分隔的值列表（2.0em、Verdana、Arial、Helvetica）
• 将一个值映射到另一个值（key 1: value 1, key 2: value 2）
• 函数引用。

SASS 始终支持 CSS 属性值的其他所有类型，例如 Unicode 范围、特殊字符和未加引号的字符串。

7) 如何在 SASS 中定义变量？

SASS 中的变量以 ($) 符号开头，变量赋值使用冒号 (:)。

8) SCSS 和 SASS 的主要区别是什么？

以下是 SCSS 和 SASS 之间的主要区别列表：

• SASS 就像一个 CSS 预处理器。它拥有 CSS3 的扩展。SASS 源自另一个称为 Haml (HTML abstraction markup language) 的预处理器。
• SASS 包含两种语法：“SCSS”是第一种语法，它使用 .scss 扩展。缩进语法或“SASS”是另一种语法，它使用 .sass 扩展。
• 您可以通过简单地将 .CSS 扩展更改为 .SCSS 来将有效的 CSS 文档转换为 SASS。
• SCSS 完全兼容 CSS。它提供了对 CSS 友好的语法，以缩小 SASS 和 CSS 之间的差距。SCSS 被称为 Sassy CSS。

9) 解释 Sass @import 函数的用途？

• 它允许您扩展 CSS 的 import 规则。为此，您需要启用 SASS 和 SCSS 文件的导入。
• 它可以将所有导入的文件合并到一个输出的 CSS 文件中。
• 它用于虚拟匹配和混合任何文件。
• 它需要一个文件名来使用 import 函数。
• 它提供比平面 CSS 更好的文档样式呈现。
• 它使您能够更好地组织您的响应式设计项目。

10) SASS 的主要优点是什么？

以下是 SASS 的主要优点列表：

• 它更稳定、更强大、更优雅，因为它扩展了 CSS。因此，设计师和开发人员可以轻松高效地工作。
• 它包含的代码量较少，因此更节省时间。
• 它允许在编程结构中编写干净的 CSS。
• 它与所有 CSS 版本兼容。
• 它是 CSS 的超集，有助于设计师和开发人员更高效、更快速地工作。
• SASS 与所有 CSS 版本兼容。因此，它允许我们使用任何可用的 CSS 库。
• 它允许我们使用嵌套语法和有用的函数，如颜色处理、数学运算和其他值。

11) SASS 的主要缺点是什么？

以下是 SASS 的主要缺点列表：

• SASS 引入了一些新特性，开发人员可能需要一些时间来学习这些预处理器中的新特性。
• 在使用 SASS 时，可能会丢失浏览器内置元素检查器的优势。
• 如果一个团队在处理同一个网站，那么他们将使用同一个预处理器。如果团队中的一些人使用 SASS，而另一些人直接使用 CSS 编辑文件，那么处理网站将变得困难。
• 在 SASS 中，代码需要被编译。
• SASS 中的故障排除很困难。

12) 如何在 SASS 中引用父选择器？

我们可以使用 & 字符轻松选择父选择器。它指定了我们应该在哪里插入父选择器。

13) SASS 中列表操作的用途是什么？

在 SASS 中，列表操作用于表示用逗号或空格分隔的值序列。

14) SASS 中选择器嵌套的用途是什么？

在 SASS 中，选择器嵌套是一种允许样式表作者通过将较短的选择器嵌套在彼此内部来计算长选择器的过程。

15) SASS 支持行内注释吗？

在 SASS 中，单行注释 // 会被 .scss 预处理器删除，不会出现在 .css 文件中，而注释 /* */ 是有效的 CSS，在从 .scss 转换为 .css 文件时会被保留。

16) @mixin 指令的用途是什么？

@mixin 指令用于定义 mixins，它们可以选择性地包含变量和参数，放在 mixin 名称之后。

17) 如何使用插值（interpolation）在 SASS 中？

在 SASS 中，我们可以轻松地在变量中定义一个元素，并在 SASS 代码中对其进行插值。当我们将模块放在单独的文件中时，这很有用。

18) 你如何理解压缩的 CSS 样式？

顾名思义，压缩的 CSS 样式比所有其他 CSS 样式占用的空间最少。它只提供空白来分隔选择器，并在文件末尾添加换行符。

19) 可以在 SASS 中嵌套变量吗？

在 SASS 中，变量插值目前是不可能的。但是，我们可以使用占位符插值。

20) 你如何理解 LESS？

LESS 是一种动态样式表生成语言。它是一种 CSS 预处理器，通过动态行为扩展了 CSS。它允许使用变量、混合、操作和函数，并且可以在服务器端和客户端同时运行。

21) 创建 LESS 文件、存储和编译它的过程是怎样的？

创建和存储 LESS 文件过程与创建/存储 CSS 文件类似。您可以创建一个带有 .less 扩展名的新 LESS 文件，或者将现有的 .css 文件重命名为 .less 文件。您可以使用现有的 CSS 代码来编写 LESS 代码。您应该遵循的最佳实践，将其创建在 ~/content/ 或 ~/Styles/ 文件夹内。

22) 在 LESS 中编写 @mixin 和 @include 指令的快捷方式是什么？

作为编写 @mixin 和 @include 指令的快捷方式，我们可以使用 = 来表示 @mixin 指令，使用 + 来表示 @include 指令。这需要更少的输入，使我们的代码更简单、更易于阅读，并节省我们的时间。

23) 在 LESS 中表示变量的最佳方法是什么？

LESS 允许定义变量。在 LESS 中表示变量的最佳方法是使用 @ 符号。而变量赋值是用 : (冒号) 符号完成的。变量的值会插入到 CSS 输出文件以及最小化文件中。

24) 在 HTML5 浏览器中运行 LESS.js 时，如何将代码设置为监视模式？

当您在 HTML5 浏览器中运行 LESS.js 时，它会使用本地存储来缓存生成的 CSS。然而，开发人员无法立即看到他们所做的更改。为了立即看到您所做的更改，您可以使用以下 JavaScript 加载程序进入开发和监视模式：

25) LESS 中使用的不同颜色通道函数有哪些？

以下是 LESS 中使用的一些不同的颜色通道函数：

• hue
• 饱和度
• hsvhue
• 饱和度
• hswalue
• red
• green
• blue
• alpha
• luma
• 亮度

26) SASS 中的嵌套规则是什么？

嵌套是将多个逻辑结构组合到彼此内部的一种方法。在 Sass 中，各种 CSS 规则相互关联。

例如，如果您使用了多个选择器，那么您可以在一个选择器内部使用另一个选择器来创建复合选择器。

27) SASS 还是 Less 更好？

由于以下原因，Sass 比 Less 更好：

• Sass 提供了使用逻辑语句（如循环、条件）的功能，并允许您编写可重用的方法。
• Sass 的用户可以访问公司的库。Sass 用户还可以使用一些很棒的功能，如跨浏览器支持、旧浏览器兼容性问题修复和动态 sprite 图生成。
• Compass 还提供了将 Bootstrap、Blueprint 等外部框架添加到顶部的功能。
• Sass 为您提供了编写自定义函数的功能。

28) 在 Sass 中编写占位符选择器的方法是什么？

在 Sass 中，占位符选择器可以与类或 ID 选择器一起使用。在标准 CSS 中，它们用 "#" 或 "." 指定，但在 SASS 中，它们被 "%" 替换。它使用 @extend 指令在 CSS 中显示结果。例如：

29) SASS 中数字操作的用途是什么？

在 SASS 中，数字操作用于允许数学运算，如加法、减法、乘法和除法。

30) SASS 中颜色操作的用途是什么？

在 SASS 中，颜色操作允许使用颜色分量以及算术运算。

31) SASS 中布尔运算的用途是什么？

在 SASS 中，布尔运算允许使用 "AND"、"OR" 和 "NOT" 运算符。

32) SASS 中的括号是什么？

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

33) 定义 Sass Mixin 函数的用途？

Mixin 函数用于定义样式。函数和 Mixins 非常相似。您可以跨样式表重用此样式。要重用它，您无需求助于非语义类，如 .float-left。Mixin 可以存储多个值或参数，并调用一个函数来避免编写重复的代码。它的名称可以互换使用下划线和连字符。

34) 在 Sass 中 DRY-ing（避免重复）一个 Mixin 函数的用途是什么？

DRY-ing（避免重复）一个 Mixin 函数可以分成两部分：静态部分和动态部分。

静态 Mixin 包含那些否则会重复的信息片段，而动态 Mixin 是用户将要调用的函数。

35) 描述 Sass 注释和常规 CSS 注释之间的区别？

常规 CSS 中的注释以 /* */ 开头，而 Sass 包含两个命令。以 // 开头的单行注释，以及以 /* */ 开头的多行 CSS 注释。

36) 使用哪个指令来检测 SASS 中的错误？

Sass @debug 指令用于检测错误并将 Sass Script 表达式的值显示到标准错误输出流。例如：

37) SASS 系统的要求是什么？

Sass 系统的要求是：

38) SASS 中的 @extend 指令的用途是什么？

SASS @extend 指令用于将一组 CSS 属性从一个选择器共享到另一个选择器。它是 Sass 中一个非常重要且有用的特性。它允许类之间共享一组属性。它使您的代码更少，并允许您反复重写它。例如：

39) SASS 中的 @media 指令的作用是什么？

Sass @media 指令用于为不同的媒体类型设置样式规则。它支持并扩展了 @media 规则。此指令可以嵌套在选择器 SASS 内部，但主要影响会显示在样式表的顶层。例如：

40) SASS 中的 @at-root 指令的用途是什么？

Sass @at-root 指令是一组嵌套规则，用于样式化文档根目录处的块。例如：