深入了解 CSS 预处理器 Sass

今天我们来深入探讨一下 CSS 预处理器 Sass。我们将学习什么是 Sass，如何使用它，以及它是如何工作的。

什么是 Sass？

Sass 是 syntactically awesome style sheets 的缩写，是一种 CSS 预处理器。它是 CSS 的扩展，为基础 CSS 增加了更多的功能和优雅。普通的 CSS 代码很容易变得杂乱无章，而 Sass 提供了许多实用的功能，使我们的 CSS 代码更加可重用和逻辑化。

Sass 是如何工作的？

我们不再使用 .css 文件扩展名编写普通的 CSS 代码，而是使用 .scss 文件扩展名编写 Sass 代码。然后，我们运行一个编译器，该编译器将 Sass 代码转换为普通的 CSS 代码。这就是为什么它被称为 CSS 预处理器。

如何在本地安装和编译 Sass？

在深入了解 Sass 的主要功能之前，让我们看看如何在本地安装和编译 Sass。

第一步：初始化 package.json 文件

进入你的项目目录，运行 npm init、yarn init 或 pnpm init 以创建 package.json 文件。

{
   
  "name": "project-name",
  "description": "project-description",
  "main": "index.js",
  "scripts": {
   },
  "author": "Your name"
}

第二步：安装 Sass 编译器

运行 npm install node-sass、yarn add node-sass 或 pnpm add node-sass 安装 Sass 编译器。

{
   
  "name": "project-name",
  "description": "project-de