phpstorm webstorm idea 安装 scss sass
在使用 scss 之前，我们需要把开发环境搭好，这里介绍在 idea 系统软件（phpStorm IDEA webStorm等）中如何设置 scss 开发环境，就是让编辑器自动把 scss 文件编译成 css。
安装 node.js
我们所用的 scss 编译核心文件是 node.js 中的一个库，所以需要安装 node.js。 （node.js 是前端开发不可少的库，具体可以自行了解）
安装方法移至官网，选择你系统对应的安装文件安装即可： https://nodejs.org/zh-cn/
安装完成之后，确定可以使用 npm 命令，可以在命令行中运行 npm --version 查看是否安装成功，如果显示版本号，说明安装成功。
kyle-mbp:~ Kyle$ npm --version
6.11.2
全局安装 scss 执行文件
scss 是从 sass 进化过来的，scss 和 sass 使用的是同一个编译器，都是 sass
执行下面命令，把 sass 安装到全局
我的系统是 macOS，其它系统的操作方式类似，自行变通
sudo npm install -g sass
安装成功是这样的
配置编辑器，添加 file watcher
此时，在编辑器新建或打开 scss 文件的时候，会自动提示是否添加对应文件的监视器 file watcher。
此时只需要点击 Yes 即可直接跳到添加 file watcher 的页面。
如果没有这个提示，也可以在软件设置中手动添加：Tools - File Watcher
弹出的设置窗口是这样的：
这里可以设置如何输出 css（压缩与否），和输出 css 的路径等，如果你不需要特别的设置，只需要使用默认值，点确定即可。
成功
此时，在 scss 文件发生变化的时候，软件都会自动编译文件到 css，并带有对应的 .map 文件。
.map 文件的作用是：在浏览器中调试的时候，能把页面的样式对应到源文件 scss 上，可以看到在 scss 上对应的行号
大展身手吧！
