sass是基于ruby写的，所以你可以不懂ruby但是想用sass必须先安装ruby（mac用户系统会自带）

不想手动配置环境变量的话，安装的过程中可以直接勾选Add Ruby executables to your PATH添加到系统环境变量。(安装目录请记住)如下图： ruby安装.png

验证是否成功，cmd输入ruby -v,出现版本号说明安装成功了

ruby -v
ruby 2.5.1p57 (2018-03-29 revision 63029) [x64-mingw32]

接下来在安装sass之前还要有一部切换ruby gem源，因为gem下载sass在国内被屏蔽了，直接下载sass会报错，所以跟着3步走：

1.删除自带gem源
2.切换淘宝源
3.查看当前源

gem sources --remove https://rubygems.org/
gem sources -a https://ruby.taobao.org/
gem sources
*** CURRENT SOURCES ***
https://rubygems.org/

好了，现在可以下载sass和compass

npm i sass

Compass由SASS的核心团队成员Chris Eppstein创建，是一个非常丰富的样式框架，包括大量定义好的mixin，函数，以及对SASS的扩展。（后期）

npm i compass

ps:sass语法的认识请转官网

编辑器webstorm sass的配置

注意：因为为了便于项目的管理，我们将导出的css配置到一个css目录下比较好，默认导出的css会和sass在同一个目录

webstorm配置.png

这样你就可以实时编写你的sass，你的css也会实时更新引入你的页面了

但是我们可以将Arguments中的路径 --no-cache --update :.css

改成这样--no-cache --update :\css$FileNameWithoutExtension$.css

这样的话，生成的css文件就会在css目录下了

scss.png