sass_interview_questions

现代 Sass 面试常见问题

本节涵盖了在技术面试中可能遇到的关于 Sass (Syntactically Awesome Stylesheets) 的常见问题，内容已根据当前的最佳实践和现代 Sass 生态系统进行了更新。

什么是 Sass？

Sass 是一个成熟、稳定且功能强大的 CSS 预处理器。它通过变量、嵌套、混合 (mixins)、函数、继承等特性扩展了 CSS，使开发者能够编写更易维护、可重用和结构化的样式表。Sass 代码最终会被编译成浏览器能够理解的标准 CSS。

为什么使用 Sass？

使用 Sass 的主要原因包括：

DRY 原则 (Don’t Repeat Yourself): 通过变量、混合 (mixins) 和函数减少重复。
模块化: 能够使用 @use 和 @forward 规则将样式表拆分成更小、更易管理的文件。
可维护性: 使复杂的样式表更易于管理和更新。
可读性: 嵌套规则模仿 HTML 结构，提高了代码清晰度。
高级功能: 提供逻辑控制（条件判断、循环）、用于计算和转换的函数（例如，颜色操作），以及更好的组织工具。
生态系统: 能很好地与现代构建工具（Webpack、Vite、Parcel）和框架集成。

Sass 的主要特性有哪些？

兼容性: 完全兼容标准 CSS。
变量: 存储可重用的值，例如颜色、字体或尺寸（$primary-color: #333;）。
嵌套: 将 CSS 规则相互嵌套，模仿 HTML 结构（nav { ul { li { a { ... } } } }）。
分部文件 (Partials) 和模块 (Modules): 将 CSS 拆分成多个文件（_partial.scss），并使用 @use 或 @forward 导入它们，以实现更好的组织和依赖管理。
混合 (Mixins): 定义可重用的样式块，它们可以接受参数（@mixin button-styles($bg-color) { ... }），并可以使用 @include 引入。
扩展 (Extend) / 继承: 使用 @extend（谨慎使用）或占位符选择器（%）在选择器之间共享一组 CSS 属性。
运算符: 直接在样式表中执行数学运算（+, -, *, /, %）。
函数: 使用内置函数（例如 lighten()、darken()、mix()、adjust-hue()）或使用 @function 定义自定义函数。
控制指令: 使用 @if、@else、@for、@each 和 @while 进行条件逻辑和循环。

使用 Sass 有什么优点？

优点与 Sass 的特性大部分重叠：

效率: 更快速、更高效地编写 CSS。
组织性: 改进了代码结构和模块化，尤其适用于大型项目。
可重用性: 变量、混合 (mixins) 和函数提高了代码的可重用性。
可维护性: 更易于更新和重构样式。
强大的工具: 提供超越标准 CSS 的高级功能。

使用 Sass 可能有什么缺点？

编译步骤: 需要一个编译步骤将 Sass/SCSS 转换为 CSS，这会增加构建过程的复杂性（尽管这在现代 Web 开发中是标准的）。
学习曲线: 预处理器新手需要学习其语法和概念。
调试: 调试有时会稍微困难一些，因为浏览器检查器显示的是编译后的 CSS；尽管如此，源映射 (source maps) 通过将编译后的 CSS 映射回原始 Sass 源代码，很大程度上解决了这个问题。
过度复杂化: 如果不审慎使用 Sass 的强大功能，可能会导致样式表过度复杂或抽象（例如，过度嵌套、复杂的 @extend 用法）。

Sass 支持哪两种语法？

Sass 支持两种语法：

SCSS (Sassy CSS): 使用 .scss 文件扩展名。它是 CSS 的超集，这意味着任何有效的 CSS 也是有效的 SCSS。它使用大括号 {} 表示块，使用分号 ; 分隔规则，与 CSS 类似。这是最广泛使用和推荐的语法。
缩进语法（通常简称为 “Sass”）: 使用 .sass 文件扩展名。它依赖于缩进而不是大括号，依赖于换行而不是分号。这是原始语法，但现在不太常见了。

SCSS 示例:

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  li { display: inline-block; }
}

缩进语法 (.sass) 示例:

nav
  ul
    margin: 0
    padding: 0
    list-style: none
  li
    display: inline-block

目前 Sass 通常如何安装和使用？

主要的实现是 Dart Sass。它通常使用像 npm 这样的包管理器进行安装（全局安装或按项目安装）：

# 全局安装
npm install -g sass

# 项目安装
npm install sass --save-dev

然后可以通过命令行运行（sass input.scss output.css --watch），或集成到 Webpack (使用 sass-loader)、Vite 或 Parcel 等构建工具中。

Sass 中的嵌套规则是什么？

嵌套允许你将 CSS 选择器写在彼此内部，模仿 HTML 结构。这减少了重复并提高了可读性。

// SCSS
.card {
  padding: 1rem;
  background-color: white;

  h2 {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
  }

  p {
    color: #555;
  }
}

// 编译为:
.card {
  padding: 1rem;
  background-color: white;
}

.card h2 {
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
}

.card p {
  color: #555;
}

在 Sass 中如何引用父选择器？

在嵌套规则中，使用和号 (&) 字符来引用父选择器。这对于伪类、伪元素或修改父元素本身很有用。

a {
  text-decoration: none;
  color: blue;

  &:hover {
    text-decoration: underline;
  }

  .icon-& {
    // 生成 .icon-a
    display: inline-block;
  }
}

Sass 中的占位符选择器是什么？

占位符选择器以 % 开头（例如 %message-shared）。它们看起来像类选择器，但除非使用 @extend 扩展它们，否则不会包含在 CSS 输出中。它们对于创建仅用于继承的基础样式很有用，可以避免最终 CSS 中出现未使用的工具类。

%message-shared {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.message-success {
  @extend %message-shared;
  border-color: green;
}

.message-error {
  @extend %message-shared;
  border-color: red;
}

@mixin 和 @extend 有什么区别？

@mixin: 定义一个可以使用 @include 重用的样式块。混合 (mixins) 可以接受参数，使其像函数一样灵活。无论在哪里引入它们，它们都会生成重复的 CSS 规则（除非巧妙优化）。通常更适合用于可重用的样式模式，特别是那些需要通过参数进行定制的情况。
@extend: 允许选择器继承另一个选择器的样式。它在编译后的 CSS 中将共享相同样式的选择器组合在一起，避免了代码重复，但如果过度使用，可能会创建复杂、紧密耦合的选择器和庞大的 CSS 规则。最好用于真正的语义关系（例如 .error-button 是一种 .button）或与占位符选择器（%）一起使用。

@import、@use 和 @forward 有什么区别？

@import: 引入 Sass 分部文件（partials）的传统方式。它会将导入文件中所有的变量、混合 (mixins) 和函数全局暴露到当前作用域，可能导致命名冲突并使依赖关系难以跟踪。这种方式正在被逐步淘汰。
@use: 从另一个 Sass 模块（文件）加载样式、变量、混合 (mixins) 和函数的现代推荐方式。它会根据文件名创建一个命名空间（例如 variables.$primary-color）或自定义命名空间（@use 'variables' as var;）。这可以防止全局作用域污染，并清晰地显示依赖关系。
@forward: 在 Sass 模块内部使用，用于暴露来自另一个模块的变量、混合 (mixins) 或函数，使使用当前模块的文件能够访问它们。它的作用类似于再导出 (re-export)，对于为库或组件文件夹创建 API 层非常有用。

解释 SassScript 运算。

SassScript 支持多种运算：

数值运算: 标准算术运算（+, -, *, /, %）。支持单位，并尽可能执行单位转换（例如 1in + 10px）。
颜色运算: 算术运算可以应用于颜色分量（例如 rgba(10, 20, 30, 0.5) + rgba(5, 5, 5, 0.1)）。还包括 lighten()、darken()、mix()、adjust-hue() 等函数。
字符串运算: 使用 + 进行连接。字符串可以是带引号的或不带引号的（带引号的字符串通常更安全）。
布尔运算: 与控制指令一起使用 and、or、not。
列表运算: 用于操作列表的函数（例如 append()、nth()、join()）。列表可以是空格分隔的或逗号分隔的。
Map 运算: 键值对 Map（例如 (key1: value1, key2: value2)），带有 map-get()、map-has-key()、map-merge() 等函数。

Sass 中的插值（Interpolation）是什么？

插值允许你使用 #{} 语法将 SassScript 变量或表达式的值插入到选择器、属性名或带引号的字符串中。

$property: color;
$icon-name: 'user';

.icon-#{$icon-name} {
  #{$property}: blue;
  background-image: url("/icons/#{$icon-name}.svg");
}

!default 是什么意思？

变量赋值上的 !default 标志意味着只有在变量之前未被赋值（或被赋值为 null）时，才应为其赋上该值。它常用于库和框架中，允许用户在导入/使用库的 Sass 文件之前轻松覆盖默认设置。

// 在库文件中 (_variables.scss)
$primary-color: blue !default;

// 在用户文件中
$primary-color: red; // 覆盖默认值
@use 'library/variables';

.button {
  background-color: variables.$primary-color; // 将是红色
}

Sass 函数是什么？

函数是可重用的 SassScript 逻辑块，它们接受参数并返回单个值。Sass 提供了许多内置函数（例如用于颜色操作、数学、字符串、列表、Map 的函数），你也可以使用 @function 指令定义自己的自定义函数。

@function px-to-rem($pixels, $base-font-size: 16) {
  @return ($pixels / $base-font-size) * 1rem;
}

.element {
  font-size: px-to-rem(24); // 返回 1.5rem
}

源映射 (Source Maps) 是什么，为什么它们对 Sass 有用？

源映射 (Source Maps) 是 .css.map 文件，它们在编译后的 CSS 输出和原始 Sass 源文件之间创建映射。在浏览器开发者工具中检查元素时，源映射允许浏览器显示生成特定样式的原始 .scss 文件名和行号，而不是只显示大型编译 CSS 文件中的行。这使得调试变得容易得多。

如何在 Sass 中处理厂商前缀（Vendor Prefixes）？

虽然 Sass 混合 (mixins) 历史上曾用于处理厂商前缀，但现代的最佳实践是不要在 Sass 中手动处理前缀。而是根据规范编写标准 CSS，并使用像 Autoprefixer 这样的后处理工具（通常集成到构建过程中），它会根据浏览器支持数据（例如来自 Can I Use）自动添加必要的前缀。