ruby环境下的scss安装以及webstorm的配置scss文件预编译一系列操作@[HG/飞飞]（first 01 one)

ruby环境下的scss安装以及webstorm的配置scss文件预编译一系列操作@[HG/飞飞]（first 01 one)

ruby环境下的scss安装以及webstorm的配置scss文件预编译一系列操作

ruby安装

在ruby官网进行下载安装ruby官网

1. 简单介绍一下：ruby只是我们进行scss/sass编译时的一种语言环境，因为scss是基于ruby进行开发的，所以我们只需要安装ruby环境即可，不是必须完全了解ruby，当然，如果你有兴趣，可以去官网或者相应社区深入了解学习。
2. ruby安装需要注意的问题：
   a.安装时环境变量的勾选项一定要勾选，不然系统会找不到相应的执行文件，看下图：
   
   3.ruby安装完成后建议查看相应的参数是否正确。
   a.重启cmd程序，键入： ruby -h 查看相应参数：
   
   b.键入： ruby -v 查看相应版本。
   
3. 安装scss
   a.scss,是css的一种拓展语言，很强大~~~
   b.安装scss可能遇到的坑！
   这里建议大家安装ruby时，安装官网的最新稳定版，旧的版本可能导致
   安装scss时的凭证出现错误，然后各种ERROR。（这一点很重要！）
   c.cmd键入： gem install sass (如果安装不成功：由于网络问题)
   问题一：当你安装scss时，由于网络很慢，然而镜像是人家国外的镜像，所以很有可能下载中途出现问题。

解决办法：#移除上次安装云端缓存
$1. gem sources -remove https: //rubygems.org/
#更换淘宝镜像
$2. gem sources -a https://ruby.taobao.org/
#检查语言环境
$3. gem sources -l

#请确保只有https://ruby.taobao.org（箭头所指）【我的是利用外网镜像源】
$4. gem install sass
d.#如果你系统不支持https，请将淘宝源更换
$1. gem sources -a http://gems.ruby-china.org
$2. gem install sass
图片没有及时的截下来，（/骚扰）
4.scss安装成功

查看版本：
键入：sass -v

5. webstrom中进行配置scss预编译
a.看图：file >>Settings…
b.找到Tools >>File Watchers

c.看到内个+号没，虽然有点小，但箭头大呀，点击它。

d.选择需要预编译的文件，这里我们演示的是Scss
e.点击箭头的文件夹选项，正常情况下，它会智能匹配到ruby的.bat文件，如果异常，手动选择ruby安装目录中的bin文件下的scss.bat文件
g. 最后，测试：新建scss文件，自动生成css文件。测试文件是test.scss