如何将 SASS 添加到你的项目中？🤔

我添加了课程路线图。

上一篇文章解释了什么是 SASS，以及为什么它比 CSS 更受欢迎。现在，我们将学习如何将它添加到我们的项目中。

浏览器无法理解 sass 文件，因为众所周知，浏览器只理解 HTML、CSS 和 JS。因此，为了让浏览器更容易理解，我们需要将 Sass 脚本编译成 CSS 文件。

在接下来的几行中，我们将讨论将 Sass 编译为 Css 的 3 种方法

#1. 命令行

将 Sass 编译成 CSS 的最简单方法之一是使用sass包。

sass 可以安装在 Windows、Mac OS X、Linux 和 Unix 操作系统上。它也可以通过 Node 包管理器 (NPM) 安装。这两种方法的安装过程都非常简单。

要使用 NPM 安装 sass，我们需要先在我们的机器上安装node.js，然后打开节点终端并按照以下步骤操作：

1-运行 node --version以确认节点已正确设置。

node --version
> Expected: v16.16.0 or any other version

2-安装 sass

npm install -g sass

这将从 npm 的存储库下载包并将其全局安装到您的系统上。

3-查看 sass 文件

sass -w style.sass style.css

这将自动将 style.sass 文件编译为 style.css 文件

恭喜🎉您已成功设置 sass。

现在，如果你将此 Scss 代码复制并粘贴到你的本地 Scss 文件中

$socails : facebook twitter youtube;
@each $item in $socails {
    .#{$item}-img{
        background: url('../images/image-#{$item}.png');
    }
}

它将被编译为

.facebook-img {
  background: url("../images/image-facebook.png");
}

.twitter-img {
  background: url("../images/image-twitter.png");
}

.youtube-img {
  background: url("../images/image-youtube.png");
}

＃2 VS Code 扩展

live-sass是用于 sass 编译的最有效的 VS 代码扩展之一。

#3 在线编译器

有一些在线工具，例如sassMeister，无需任何安装即可编译 Sass。

现在，是时候深入了解 sass 了。在下一篇文章中，我们将进一步学习 sass 语法。