使用 Sass

使用 Sass（CLI 与构建工具）

安装 Sass（最好是 Dart Sass）后，你可以通过几种方式将 .scss 或 .sass 文件编译成 CSS。最常见的方法是直接使用 Sass 命令行界面（CLI），或将 Sass 集成到现代前端构建流程中。

1. 使用 Sass CLI

Sass CLI 提供了一种直接的方式来编译文件、监视更改和控制输出。

基本编译（单个文件）：

将 input.scss 编译为 output.css：

sass input.scss output.css

如果输入和输出文件名（不包括扩展名）相同，你也可以使用简写形式：

sass style.scss style.css

监视更改：

要在你保存 Sass 文件更改时自动重新编译，请使用 --watch 标志。这在开发过程中至关重要。

# Watch a single file
sass --watch input.scss:output.css

# Watch all .scss files in a directory ('styles/scss') and output to another ('public/css')
sass --watch styles/scss:public/css

常用 CLI 选项：

--style：设置输出格式。常见值：expanded（默认，可读）或 compressed（用于生产环境的压缩格式）。
--source-map / --no-source-map：控制是否生成 source map 文件（.css.map）。Source Maps 对于调试至关重要，因为它们将编译后的 CSS 链接回原始 Sass 源文件。除非使用 --style=compressed，否则默认启用。
--embed-sources：将原始 Sass 源内容直接嵌入到 source map 中（在某些环境中很有用）。
--load-path 或 -I：将目录添加到 Sass 加载路径，允许 @use 或 @import 在该目录中找到文件，而无需相对路径（例如，-I node_modules）。
--quiet 或 -q：抑制警告消息。
--stop-on-error：如果发生错误，立即停止编译（默认行为）。
--update：仅编译实际已更改的文件（对于编译目录很有用）。

示例用法：

# Watch and compile for development with source maps
sass --watch src/scss:dist/css --style=expanded --source-map

# Compile once for production (minified, no source map)
sass src/scss/main.scss dist/css/main.min.css --style=compressed --no-source-map

2. 与构建工具集成

在现代 Web 开发中，Sass 编译通常作为更大构建过程的一部分处理，使用 Vite、Webpack、Parcel 或框架 CLI（如 Angular CLI、Create React App）等工具。

Vite：

Vite 内置支持 Sass。只需将 Sass 安装为开发依赖项（npm install -D sass），即可将 .scss 文件直接导入到你的 JavaScript/TypeScript 模块中。

// main.js or component file
import './styles/main.scss';

Webpack：

需要安装 sass 和 sass-loader。在 webpack.config.js 文件的模块规则部分配置 sass-loader。

// webpack.config.js (simplified)
module.exports = {
  // ... 其他配置
  module: {
    rules: [
      {
        test: /\.s[ac]ss$/i,
        use: [
          // 从 JS 字符串创建 `style` 节点（或使用 MiniCssExtractPlugin）
          'style-loader',
          // 将 CSS 翻译成 CommonJS
          'css-loader',
          // 将 Sass 编译成 CSS
          {
            loader: 'sass-loader',
            options: {
              // 优先使用 `dart-sass`
              implementation: require('sass'),
              sassOptions: {
                // outputStyle: 'compressed', // 示例选项
              },
            },
          },
        ],
      },    ],
  },
};

Parcel：

如果你的项目中安装了 sass，Parcel 通常会开箱即用地支持 Sass。只需在 HTML 中引用你的 .scss 文件或在 JS 中导入即可。

框架 CLI：

Angular CLI、Create React App（通过自定义或 react-scripts-sass）、Next.js、Nuxt.js 等工具通常内置或易于配置 Sass 支持。请查阅它们各自的文档。

使用构建工具具有许多优点，例如自动添加前缀（通过 PostCSS 使用 Autoprefixer）、将 CSS 提取到单独的文件、热模块替换（HMR）以及优化的生产构建。

语法选择

Sass 编译器根据文件扩展名（.scss 或 .sass）自动检测语法。SCSS 是默认且最常见的。虽然你可以在某些环境中使用选项强制指定语法，但依赖文件扩展名是标准做法。

字符编码

Sass 遵循 CSS 规范处理字符编码：

如果存在 Unicode 字节顺序标记（BOM），它会优先处理。
接下来，它检查 Sass 文件开头的 @charset 声明（例如，@charset "UTF-8";）。
如果两者都不存在，Sass 默认为 UTF-8，这适用于几乎所有用例。
如果 CSS 输出包含非 ASCII 字符，Sass 会自动添加 @charset 声明。

除非处理旧文件或非 UTF-8 编码，否则你很少需要手动指定 @charset。