SCSS 三分钟
我们最喜欢的资源
等等，等等，那是什么？
在我们开始之前，不妨先了解一下 SASS/SCSS 是什么。SCSS 是一个预处理器，这意味着它需要被处理成另一种格式（CSS），并且它是 CSS 的超集。这意味着我们可以使用一些 CSS 标准之外的特性，从而在编写 CSS 时提高效率。由于 SCSS 是 CSS 的超集，这也意味着普通的 CSS 代码也是有效的 SCSS 代码，这使得从 CSS 过渡到 SCSS 变得更加容易，只需要重命名一些文件即可。我们一直在讨论 SCSS，也提到了 SASS，所以你可能想知道这两者之间有什么区别…… Stack Overflow 上的这个回答总结得很好，但简单来说，SCSS 是更新的版本，两者只是语法不同而已。我们建议你使用 SCSS。想了解更多关于 SCSS 的信息吗？请查看这篇文章。
我们开始吧
我们倾向于尽可能保持轻量级，因此我们选择
使用 npm 脚本来协调 scss 编译过程。这很
容易修改，以便与webpack、gulp、grunt、broccoli、brunch或您正在使用的任何其他工具集成。
所以接下来我们安装node-sass，它将负责构建我们的 scss 文件。在项目根目录下，我们通过 npm 安装它。
npm install --save node-sass
现在我们需要添加一个脚本来监视我们何时编辑 scss 文件，并将
它们编译成有效的 css 文件。所以我们将添加一个 npm 脚本来处理这项工作：
"scripts": {
"scss": "npx node-sass -w scss/app.scss -o assets/css/"
}
想知道 npx 是什么吗？点击这里了解一下。简单来说，它允许我们快速调用 Node 包，在本例中调用的是本地包。正如注释中提到的，我们甚至不需要在开头写上 npx，因为我们是通过 npm 脚本调用的，所以也可以直接写 `npx npm run dev` node-sass -w scss/app.scss -o assets/css/。然后，我们告诉 node-sass 监视我们的 scss 文件 app.scss，并将结果输出到 assets 目录下的 css 目录中。接下来，我们来创建一些 scss 文件。
cd scss & touch app.scss
让我们在 app.scss 文件中添加一些 scss 代码：
$black: #000000;
.container {
margin: 0 auto;
&:hover {
border: 1px solid $black;
}
}
现在，如果我们检查一下css目录下的内容，会看到这些：
.container {
margin: 0 auto; }
.container:hover {
border: 1px solid black; }
太棒了！它读取了我们的 SCSS 文件，并输出了我们可以使用的有效 CSS 代码。让我们通过一个不到 3 分钟的视频来了解这一切是如何实现的！
