SASS的安装和使用

Sass是Ruby语言写的，所以使用环境必须依赖Ruby，必须先安装Ruby，然后再安装Sass。放心，二者的语法并没有关系，不懂Ruby，也可以使用Sass。

如果是IOS系统，则已经安装好了Ruby，不需要重新安装，这里主要将Windows系统。

一：安装

到官网下载Ruby安装文件，版本随意。（链接：http://rubyinstaller.org/downloads?utm_source=caibaojian.com）

点击安装文件按照提示安装，安装位置建议安装到C盘，安装最后一步建议选择第二项，如下图：

安装完成在菜单中找到安装的ruby，点击启动命令控制面板，如下图：

在命令控制面板中输入：gem install sass回车，等待安装Sass，安装成功如下图（图片来源于网络）。

二：使用

1、Sass源文件转译成CSS文件

如果你的项目文件位置不在C盘，要更改命令行的默认访问路径，如d盘，输入：d: 回车，如下图：

输入：cd +放置样式表的文件夹路径，回车，这里放在style文件夹下，如下图：

在style下创建sass文件，如test.scss（.sass与.scss功能特性都一样，只是书写规则有所不同，sass要求更规范，一般用.scss就好），在命令控制面板中输入 sass test.scss  test.css 回车即生成.test.css.map和test.css两个文件,如图：

2、文件监听

单个文件的监听，输入：sass  --watch  test.sass:test.css 回车即监听成功，如下图。这样在.scss文件中写样式时，与其对应的.css文件中就会自动编译出对于的样式代码。

多个文件的监听，是文件夹与文件夹之间的监听，例如在style目录下创建一个文件夹sass，用于放置sass文件，css文件仍在style目录下。命令控制面板中的默认访问路径去掉style路径，监听命令 为：sass  --watch  style/sass:style 回车即可监听成功如下图：

至此，就可以在.scss文件中编写样式代码啦，要注意的是，在页面中当然还是引用对应的.css文件。