Sass - 安装

要使用 Sass，你需要安装一个 Sass 编译器。主要且推荐的实现是 Dart Sass，它速度快、积极维护并提供最新的功能。

先决条件

安装 Dart Sass 最常见的方式涉及 Node.js 和 npm (Node Package Manager) 或 Yarn。请确保你的系统上安装了最新版本的 Node.js。你可以从 nodejs.org 下载。

安装方法

1. 使用 npm (推荐)

你可以在全局或项目本地安装 Sass。

全局安装：

这使得 sass 命令在你的终端中随时可用。

npm install -g sass

本地（项目）安装：

这是大多数项目推荐的方法，因为它将 Sass 版本锁定在项目中，使协作更容易。在终端中导航到你的项目根目录。

npm install sass --save-dev

这会将 sass 添加到你项目的 package.json 文件中的 devDependencies。然后，你可以通过 npm scripts（例如，"scripts": { "scss": "sass input.scss output.css" }，使用 npm run scss 运行）或直接使用 npx sass ... 来运行 Sass。

2. 独立可执行文件

如果你不想使用 Node.js/npm，你可以直接从 Dart Sass GitHub 发布页面下载预编译的 Windows、macOS 和 Linux 独立可执行文件：

https://github.com/sass/dart-sass/releases

下载适用于你操作系统的压缩包，解压，然后将包含 sass 可执行文件的目录添加到系统的 PATH 环境变量中，这样你就可以从任何终端运行它。

3. 使用包管理器 (例如 Homebrew)

如果你使用 Homebrew (macOS) 或 Chocolatey (Windows) 等包管理器，通常可以通过它们安装 Dart Sass：

# 使用 Homebrew (macOS/Linux)
brew install sass/sass/sass

# 使用 Chocolatey (Windows)
choco install sass

注意：请查阅相应的包管理器文档以获取最新的命令。

验证安装

安装完成后，打开终端并运行：

sass --version

这将输出已安装的 Dart Sass 版本（例如，1.71.1）。

简单用法示例

创建一个 HTML 文件 (index.html)：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sass Example</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>Hello Sass!</h1>
    <p>This paragraph is styled with Sass.</p>
</body>
</html>

在同一目录中创建一个 Sass 文件 (style.scss)：

$primary-color: #3498db;
$text-color: #333;

body {
  font-family: sans-serif;
  color: $text-color;
}

h1 {
  color: $primary-color;
}

p {
  font-size: 1.1em;
}

使用命令行编译 Sass 文件：

# 编译一次
sass style.scss style.css

# 监听文件变化并自动重新编译
sass --watch style.scss:style.css

这将生成一个 style.css 文件：

/* style.css (Compiled Output) */
body {
  font-family: sans-serif;
  color: #333;
}

h1 {
  color: #3498db;
}

p {
  font-size: 1.1em;
}

在浏览器中打开 index.html。你应该会看到样式已应用。

这涵盖了基本的安装和用法。Sass 与现代 Web 开发工作流程深度集成，通常由 Webpack、Vite 或 Parcel 等构建工具处理。