如何在本地安装和配置 SASS

在编写 Sass 代码之前，需要先将其本地安装。因为浏览器默认并不认识 Sass 这种语言。

接下来我们将逐步设置开发环境，以便编写并编译 Sass 代码。

注意： 当 Sass 被编译后，会转换为浏览器可以识别和渲染的普通 CSS 代码。

环境设置

在开始之前，您必须在电脑上安装 npm，它随 Node.js 一起提供；您可以从 这里 下载安装。如果尚未安装，请立即完成安装。

如果您不确定是否已安装 Node.js，可以在终端中运行命令 node -v。

如果看到版本号，则说明已成功安装！

关于终端的一点说明：

如果您是第一次接触 Sass，很可能也对在终端中运行命令不太熟悉。其实并没有看起来那么复杂！一旦掌握，将会极大提升开发效率。

在 Windows 电脑上打开终端的方法：右键点击 Windows 图标，选择 Windows Powershell。如果您使用的是 Mac，可前往 Finder > Applications > Utilities > Terminal。

文件夹结构

现在我们来创建项目文件夹！结构如下：

1sass-project
2   |- sass
3   |- css

打开终端，进入您希望安装 Sass 项目的目录（使用 cd 命令切换）。然后执行以下命令：

1mkdir sass-project
2cd sass-project
3mkdir -p sass css

文件结构

在该文件夹中，您需要创建一个 index.html 文件和一个 main.scss 文件。

运行以下命令创建这些文件：

1touch index.html
2cd sass
3touch main.scss
4cd ..

您还需要一个默认的 CSS 样式表，用于存放 Sass 编译后的输出结果：

1cd css
2touch style.css

打开 index.html 文件，粘贴以下代码：

1<!DOCTYPE html>
2<html>
3  <head>
4    <title>首页</title>
5    <link rel="stylesheet" href="css/style.css">
6  </head>
7  <body>
8
9  </body>
10</html>

这就是一个基础页面结构，并且已经连接了样式表！

初始化项目目录

所有使用 npm 的项目都需要进行初始化。请确保您仍在 sass-project 文件夹中，然后运行以下命令：

1npm init -y

这将为您的项目生成一个 package.json 文件。后续课程中我们会深入学习这个文件的配置。

安装 node-sass

node-sass 是用于将 .scss 文件编译为 .css 文件的库。

运行以下命令，将 node-sass 作为开发依赖项安装：

1npm install node-sass --save-dev

注意： 开发依赖 仅在项目构建阶段使用，不会包含在运行时环境中。

编译 Sass 代码为 CSS

接下来，我们需要创建一个 npm 脚本用于执行编译操作。

将以下脚本添加到之前创建的 package.json 文件的 scripts 部分中：

1"compile-sass": "node-sass -w sass/main.scss css/style.css"

请记得每个脚本之间用逗号分隔！

这里我们指定 main.scss 为主 Sass 文件，style.css 为编译后的 CSS 输出文件。

要将 Sass 代码编译为 CSS，只需运行：

1npm run compile-sass

实时刷新功能

我们还可以为项目添加实时刷新功能！运行以下命令全局安装：

1npm install live-server -g

确保您仍处于 Sass 项目文件夹中，然后运行：

1live-server

这样一来，您的项目就已在本地通过 HTTP 协议运行，拥有一个非常便捷的开发环境！

您需要在两个独立的终端窗口中分别保持 live-server 和 npm run compile-sass 的运行状态。

至此，您的本地开发环境已全部配置完成！