面试题：Sass、Less 是什么？为什么要使用它们？

Sass 和 Less 都是 CSS 预处理器（CSS Preprocessors），它们扩展了 CSS 的功能，通过引入编程特性（如变量、嵌套、混合、函数等），让 CSS 更强大、更易维护、更适合团队协作和大型项目开发。

---

一、Sass 和 Less 是什么？

✅ 1. Sass（Syntactically Awesome Style Sheets）

• 诞生时间：2007 年
• 语法版本：
  • SCSS（Sassy CSS）：.scss 文件，兼容 CSS 语法，推荐使用。
  • Sass：.sass 文件，缩进语法（类似 Python），不使用大括号和分号。
• 编译方式：基于 Ruby（早期）或 Dart Sass（现代推荐，Node.js 支持）
• 特点：功能最丰富，生态强大，社区活跃。

示例（SCSS）：

$primary-color: #007bff;

.button {
  background: $primary-color;

  &:hover {
    background: darken($primary-color, 10%);
  }
}

---

✅ 2. Less（Leaner Style Sheets）

• 诞生时间：2009 年
• 语法：.less 文件，基于 CSS 语法扩展
• 编译方式：基于 JavaScript（可在浏览器或 Node.js 中运行）
• 特点：上手简单，与 CSS 高度兼容，适合前端开发者快速接入。

示例：

@primary-color: #007bff;

.button {
  background: @primary-color;

  &:hover {
    background: darken(@primary-color, 10%);
  }
}

---

二、为什么要使用 Sass/Less？（核心优势）

✅ 1. 变量（Variables）—— 提升可维护性

• 定义颜色、字体、间距等设计 token，统一管理。
• 修改一处，全局生效。

$color-primary: #007bff;
$font-size-base: 16px;
$spacing: 1rem;

.btn {
  color: $color-primary;
  font-size: $font-size-base;
  padding: $spacing;
}

🎯 场景：主题切换、设计系统统一。

---

✅ 2. 嵌套（Nesting）—— 提高可读性

• 支持选择器嵌套，结构更清晰，减少重复代码。

.nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { 
    display: inline-block; 
  }

  a {
    text-decoration: none;
    &:hover { color: red; }
  }
}

⚠️ 注意：避免过度嵌套（建议不超过 3 层），否则生成的 CSS 层级过深，影响性能。

---

✅ 3. 混合（Mixins）—— 代码复用

• 类似函数，可定义可复用的样式块，支持参数。

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
          border-radius: $radius;
}

.button {
  @include border-radius(4px);
}

🎯 场景：浏览器前缀、常用样式组合（如 flex 布局）。

---

✅ 4. 函数与运算（Functions & Operations）

• 支持颜色函数、数学运算，动态生成样式。

.lighten-bg {
  background: lighten(#000, 20%); // 变亮
}

.width-half {
  width: 50% - 10px; // 运算
}

---

✅ 5. 模块化与导入（@import / @use）

• 将样式拆分为多个文件，按需导入，便于组织大型项目。

// _variables.scss
$primary: #007bff;

// _mixins.scss
@mixin center { display: flex; justify-content: center; }

// main.scss
@use 'variables';
@use 'mixins';

.btn {
  background: variables.$primary;
  @include mixins.center;
}

🔹 Sass 1.23+ 推荐使用 @use 替代 @import，避免命名冲突。

---

✅ 6. 继承（@extend）—— 减少冗余

• 让一个选择器继承另一个的样式，生成更紧凑的 CSS。

.message {
  border: 1px solid #ccc;
  padding: 10px;
}

.error {
  @extend .message;
  background: red;
}

生成：

.message, .error { border: 1px solid #ccc; padding: 10px; }
.error { background: red; }

---

三、Sass vs Less 对比

特性	Sass	Less
语法	SCSS（推荐）或 Sass	Less（基于 CSS）
编译环境	Dart/Node/Ruby	JavaScript（Node/浏览器）
功能丰富度	⭐⭐⭐⭐⭐（最强大）	⭐⭐⭐⭐
学习曲线	稍陡	平缓，易上手
社区生态	极其丰富（Compass, Bourbon）	丰富
性能	Dart Sass 快	较快
现代推荐	✅ Dart Sass（官方推荐）	✅ Node.js 环境

🔹 目前趋势：Sass（尤其是 SCSS）在大型项目中更受欢迎，Less 在轻量项目或历史项目中仍有使用。

---

四、使用流程（工作流）

1. 编写 .scss 或 .less 文件
2. 使用构建工具（Webpack、Vite、Gulp）或命令行编译
3. 输出为 .css 文件
4. 浏览器加载编译后的 CSS

🔹 现代前端工具链（如 Vue CLI、Create React App）通常内置 Sass/Less 支持。

---

五、面试加分点

点位	说明
🌟 理解“预处理”本质	Sass/Less 不是 CSS，需编译成 CSS 浏览器才能识别
🌟 结合工程化	与 Webpack、PostCSS、CSS Modules 配合使用
🌟 设计系统集成	用变量管理主题色、字体等设计 token
🌟 性能意识	避免过度嵌套和冗余生成
🌟 技术选型建议	新项目推荐 Sass (SCSS)，生态更成熟

---

💬 一句话总结：

“Sass 和 Less 是 CSS 预处理器，通过变量、嵌套、混合等编程特性，解决了原生 CSS 缺乏逻辑和复用能力的问题，显著提升了样式代码的可维护性和开发效率。现代项目推荐使用 Dart Sass，结合构建工具实现高效开发。”

在面试中，能从可维护性、团队协作、设计系统等角度阐述其价值，会显得你具备工程化思维。