要在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是自动编译生成）