SASS 面试题

下面列出了一些经常被问到的 SASS 面试题及答案。

1) 什么是 SASS？

SASS 的意思是“语法很棒的样式表”。它是一个 CSS 预处理器，用于减少 CSS 中的重复并节省时间。它为基本语言增加了力量和优雅，并方便您添加变量、嵌套规则、混合器、内联导入、继承等等，所有这些都具有完全 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)
• 空值
• 颜色 (red, #FF0000)
• 文本字符串，不带引号 ("foo", "bar")
• 由逗号或空格分隔的值列表 (2.0em, Verdana, Arial, Helvetica)
• 从一个值到另一个值的映射（键 1：值 1，键 2：值 2）
• 函数引用。

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

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

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

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

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

• SASS 就像一个 CSS 预处理器。它具有 CSS3 的扩展名。 SASS 源自另一个称为 Haml（HTML 抽象标记语言）的预处理器。
• SASS 包含两种类型的语法：“SCSS”是第一种语法，它使用 .scss 的扩展名。缩进语法或“SASS”是另一种语法，它使用 .sass 的扩展名
• 您可以通过简单地将扩展名从 .CSS 更改为 .SCSS，将有效的 CSS 文档转换为 SASS。
• SCSS 完全兼容 CSS。它提供 CSS 友好的语法来缩小 SASS 和 CSS 之间的差距。 SCSS 称为 Sassy CSS。

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

• 它方便您扩展 CSS 导入规则。为此，您需要启用 Sass 和 SCSS 文件的导入。
• 它可以将所有导入的文件合并到单个输出的 CSS 文件中。
• 它用于虚拟匹配和混合任何文件。
• 它需要一个文件名来导入函数。
• 它提供比平面 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 指令用于定义混合器，其中包含变量和参数（可选）在混合器的名称之后。

17) 如何在 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) 编写 @mixin 和 @include 指令的快捷方式是什么？

作为编写 @mixin 和 @include 指令的快捷方式，我们可以对 @mixin 指令使用 =，对 @include 指令使用 +。它需要的输入更少，使我们的代码更简单易懂，并节省了我们的时间。

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

LESS 允许定义变量。在 LESS 中表示变量的最佳方式是将它们表示为 @sing。 变量赋值使用:（冒号）符号。变量的值也会插入到 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 用户还可以使用一些很棒的功能，例如跨浏览器支持、旧版浏览器 hack 和动态 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 out Mixin 函数的用途是什么？

“DDRY-ing” (不要重复自己) Mixin 函数可以分为两个部分：静态部分和动态部分。

静态 Mixin 包含原本会被重复的信息片段，而动态 Mixin 是用户将要调用的函数。

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

常规 CSS 中的注释以 /* */ 开始和结束。Sass 包含两种注释方式：单行注释使用 //，多行注释使用 /* */。

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

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

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

以下是 Sass 系统的要求：-

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

SASS @extend 指令用于将一组 CSS 属性从一个选择器共享到另一个选择器。 这是 Sass 非常重要且有用的功能。 它允许类彼此共享一组属性。 它可以减少您的代码量，并方便您重复使用代码。 例如：

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

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

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

Sass @at-root 指令是一组嵌套规则的集合，用于在文档的根目录中设置样式块。 例如：-