如何在项目中包含 SASS 库？

本文的先决条件包括一些关于 SASS 及其在不同领域的应用的知识。

SASS 是一种脚本语言（如 JS），在浏览器中编译为 CSS。它比普通的 CSS 样式提供了一些额外的好处，因此增强了编写 CSS 样式的方式。由于浏览器无法读取 SASS 文件，因此我们需要使用 sass 编译器将其文件转换为普通的 CSS 文件。

下面列出了 SASS 相对于 CSS 提供的各种优势：

• 它提供了 mixins 的使用，这被证明在避免多次编写相同的代码方面很有用。
• 它为我们提供了嵌套功能，并允许我们尽可能多地使用变量。
• 它拥有庞大的支持社区。

因此，如今，SASS 在 CSS 面前变得越来越重要。我们可以通过多种方式在项目中包含 SASS 库。其中一些解释如下：

方法一：通过 SASS 应用程序导入

在这里，我们将使用手动过程在我们的 PC 中安装 SASS 并在我们的项目中使用它。为此，请按照以下步骤操作。

• 在任意文件夹中下载 SASS 应用程序 (zip) 文件并将其解压缩。 （或您想要的任何其他文件夹。要下载 SASS，请访问其官方网站。

解压 zip 文件的目录。

• 解压后，将环境变量PATH添加到系统中的SASS中。

设置环境变量

• 因此，现在 SASS 库已安装在我们的系统中，现在可以工作了。您可以使用命令提示符进行检查。

In command prompt type “sass” to check whether its installed successfully or not.

命令输出

方法二：使用npm安装SASS库

每当您使用名为 angular 或 react 的主要框架时，您可能会在系统中安装 npm。因此，SASS 也可以作为 npm 包使用，您可以使用它进行安装。

• 首先将当前目录更改为要安装 SASS 的目录或项目所在的目录，然后键入以下给出的命令。

句法：

npm install -g sass

• 这将安装 SASS，如下所示

npm 用于安装 sass

• 现在我们可以将它导入我们的项目并享受它的好处。

方法 3：使用扩展和插件

如果您使用 VS Code 编辑器或任何其他此类类型而不是为了使用 SASS，我们可以在我们的编辑器中安装插件或扩展。这将有助于我们在其中有效地使用 SASS。 Live sass 编译器是 sass 的最佳 sass 扩展，可在 VS Code 中使用，并允许 sass 编译器实时工作。有了这个扩展，所有的 sass 代码都会在网页重新加载时立即编译为 CSS。

VS 扩展

方法4：使用windows包管理器或Mac包管理器。

如果您是 windows 或 mac 用户，那么您可能对 Chocolatey 和 Herbrew 有所了解。这些包管理器使任何用户都可以轻松下载、更新或卸载系统中的任何应用程序。此外，它会自动设置环境变量。因此我们也可以使用这样的管理器来安装 sass。对于 Windows，如果我们想这样做，我们必须编写下面给出的代码。

句法：

choco install sass

对于 mac，我们有以下给出的代码。

brew install sass/sass/sass

因此，通过这些方式，我们可以在项目中安装和包含 SASS 库。