要在webstorm或者vscode上使用scss并且使之可以编译，都要先安装ruby环境。

所以第一步都是下载安装ruby环境。

一、下载安装ruby、scss

1.打开ruby官网下载网址：http://rubyinstaller.org/downloads/

2.选择需要下载的版本。

我掉过的坑：

我下载安装过：

这两个版本安装完成之后会有一个弹窗，让你继续选择。以至于这两个版本我都安装失败了。

后来安装了Ruby 2.3.3 (x64) 这个版本才安装成功，安装过程中会有三个勾选，最好都选上。

3.打开命令行，检测ruby是否安装成功

4.安装sass

二、在webstorm中配置scss

我最终想要形成的效果是css在一个文件夹，scss在一个文件夹。就像下图的绿框中的效果。

如果需要这种效果，可以按如下步骤设置。

1.依次在webstorm中选择

file -> settings -> File Wathers -> 添加scss开始配置

2.将Arguments改为：

--no-cache --update --sourcemap --watch $FileName$:$FileParentDir$\css\$FileNameWithoutExtension$.css

3.将output Path改为：

$FileNameWithoutExtension$.css:$FileNameWithoutExtension$.css.map

三、在vscode下配置scss

安装好ruby环境之后，vscode下的scss配置就相对来说简单一些，直接在应用中下载插件‘easy sass’

拆件安装成功之后会自动编译scss并在同级文件夹中生成css文件。

（scss文件夹是自己建立，demo.scss文件是自己建立，demo.css和demo.min.css是自动编译生成）