源文件 vs. 输出文件
在开始之前,你需要理解两个基本概念：
- 源文件：你编写 Sass 代码的文件，通常以
.scss或.sass为后缀。 - 输出文件：由 Sass 编译器生成的、浏览器可以直接识别的 CSS 文件，后缀为
.css。
使用 Sass 命令行工具
这是最直接、最基础的方式，你需要先在全局安装 Sass。
第一步：安装 Sass
打开你的终端（Terminal 或 Command Prompt）,运行以下命令：
# 使用 npm (推荐) npm install -g sass # 或者使用 yarn yarn global add sass # 或者使用 pnpm pnpm add -g sass
安装完成后，你可以通过 sass --version 来验证是否安装成功。
第二步：编译命令
基本语法是 sass [输入文件路径] [输出文件路径]。
a) 单文件编译
这是最简单的场景，将一个 Sass 文件编译成一个 CSS 文件。
假设你的项目结构如下：
my-project/
├── styles/
│ └── main.scss
└── index.html在终端中，进入 my-project 目录,然后执行：
sass styles/main.css styles/main.css
执行后，styles 目录下会生成一个新的 main.css 文件，这就是编译后的 CSS。
b) 监听模式 - 最常用！
每次修改代码后手动重新编译非常麻烦。监听模式 会自动检测源文件的变化,并自动重新编译。
使用 --watch 标志：
sass --watch styles/main.scss:styles/main.css
只要你保存 main.scss 文件，终端就会自动输出编译信息，并生成新的 main.css 文件。
c) 编译整个目录
如果你的项目有多个 Sass 文件，并且希望将它们编译到一个 CSS 文件中（通常会用到 @import），你可以直接指定一个目录作为输入，Sass 会自动处理该目录下所有的 .scss 或 .sass 文件。
sass --watch styles:styles
这行命令会：
- 监听
styles目录下的所有 Sass 文件。 - 将所有 Sass 文件编译并合并成一个
styles.css文件，也输出到styles目录。
注意：输入和输出路径相同时，输出文件名默认为 输入目录名.css（styles.css）。
高级编译选项
Sass 命令行工具还提供了一些非常有用的选项。
a) 输出风格
使用 --style 选项可以控制生成 CSS 的格式。
-
expanded (默认): 标准格式,易于阅读。
sass --style=expanded styles/main.scss styles/main.css
输出示例:
body { font-size: 16px; } -
nested: 保持 Sass 的嵌套结构，可读性好,常用于调试。
sass --style=nesteds styles/main.scss styles/main.css
输出示例:
body { font-size: 16px; } -
compact: 每个规则占一行,节省空间。
sass --style=compact styles/main.scss styles/main.css
输出示例:
body { font-size: 16px; } -
compressed: 压缩模式，移除所有空格、换行和注释，文件体积最小,适合生产环境。
sass --style=compressed styles/main.scss styles/main.css
输出示例:
body{font-size:16px}
b) 源映射
源映射文件（.map）可以帮助你在浏览器的开发者工具中直接调试 Sass 源代码，而不是编译后的 CSS,这对于定位复杂样式问题非常有帮助。
使用 --source-map 选项：
sass --source-map styles/main.scss styles/main.css
执行后,你会得到两个文件：
styles/main.css(编译后的 CSS)styles/main.css.map(源映射文件)
在 Chrome 或 Firefox 的开发者工具中，打开 Sources 面板，你就可以看到并直接编辑你的 .scss 文件了。
组合使用示例（生产环境推荐）
一个典型的生产环境编译命令会同时使用压缩和源映射：
sass --style=compressed --source-map styles/main.scss styles/main.css
在现代前端项目中的使用
在实际开发中，我们很少会直接使用 sass 命令，更常见的是将 Sass 集成到构建工具中，如 Webpack, Vite, Parcel 或 Gulp。
以 Vite 为例
Vite 是目前非常流行的前端构建工具，对 Sass 提供了开箱即用的支持。
-
安装依赖:
npm install -D sass
-
导入 Sass 文件: 在你的 JavaScript 或 TypeScript 文件中，直接导入
.scss文件即可。// src/main.js import './styles/main.scss'
-
启动项目:
npm run dev
Vite 会自动处理 Sass 文件的编译，你不需要任何额外配置，它会将 Sass 编译成 CSS，并通过
<style>标签注入到 HTML 中。 -
构建生产版本:
npm run build
Vite 会自动应用压缩等优化策略，并生成最终的 CSS 文件。
总结与对比
| 方法 | 优点 | 缺点 | 适用场景 |
|---|---|---|---|
| Sass 命令行 | 简单直接，无需配置，适合快速开始或小型项目。 | 需要手动监听，不适合大型、复杂的项目。 | 个人项目、小型网站、快速原型验证。 |
| 构建工具 (Vite/Webpack) | 自动化程度高，集成开发环境，支持热更新、代码分割、源映射等强大功能。 | 需要学习构建工具的配置，初期设置稍复杂。 | 几乎所有现代 Web 应用项目（React, Vue, Angular 等）。 |
| 代码编辑器插件 | 实时预览，方便开发时查看样式效果。 | 通常只生成未压缩的 CSS，不适合生产环境。 | 开发过程中的辅助工具，需配合其他编译方式使用。 |
推荐流程：
- 新手入门：先使用
sass --watch命令熟悉 Sass 的基本编译过程。 - 项目开发：选择一个现代前端框架（如 Vite + React/Vue），它已经内置了对 Sass 的完美支持，这是最高效、最专业的开发方式。
