SASS/Compass的安装与调试

认识SASS/Compass

SASS是对CSS的预处理器，提供了许多便利的写法，它具有某些编程的思想（比如变量、嵌套、函数、运算等等），通过它再生成相应的CSS，使得CSS的开发，变得简单和可维护。而Comapss是基于SASS的一个库，Compass相对于SASS的关系大致相当于 JQuery：JS的关系。

SASS与Compass在Windows环境下的安装

SASS是依赖于Ruby的，因此在安装SASS之前，必须先在Windows内安装Ruby。

我们简单介绍一下Ruby在Windows下的安装过程：

Ruby的安装

请从这里下载Ruby并按步骤安装。

Ruby现阶段在Windows下的安装与一般应用程序安装没有太大区别，按照默认设置安装所需组件、选择安装目录等，Ruby在Windows下的环境变量等都是由安装程序自行设置的。了解Node.js的童鞋们应该能感觉到Ruby与Nodejs有很多相似之处。

Ruby环境内有个包管理器——GEM，它类似于Nodejs下的NPM，它随着Ruby一起被安装，因此不需要额外安装。啰嗦到这里，是因为sass和compass都是基于Ruby的包，一会儿我们安装Compass/SASS时会用到它。

如果安装成功，你在Windows下的command命令行里输入：

ruby -v

应该能够得到Ruby的版本号。到这里，我们已经可以接着安装SASS/Compass环境了。

SASS/Compass的安装

我们在Windows的command命令行中输入

gem install sass

即可完成安装。不过要注意，你的电脑必须能够访问到互联网，因为此时GEM会从远程服务器上下载sass。compass是依赖于sass的，因此必须在完成sass的安装后才能安装compass，安装方式同SASS，你只需在Windows的command命令行输入：

gem install compass

即可完成安装。截至目前，新版的SASS 3.3.4貌似与compass是存在问题的，因此可能会出现compass安装不成功的提示。

其他问题：

1. 如果你使用了代理连接互联网，你可能需要设置GEM，否则它将不能获得网上的资源，设置方法：

   export http_proxy=’http://username:password@url:port/’

   如果国外服务器不给力，也可以把GEM的源换成国内的，比如淘宝：

   http://ruby.taobao.org/

   你需要在CMD下设置：

   gem sources -a http://ruby.taobao.org/

2. GEM包是可以事先下载，再通过Windows下的command命令行离线安装的，GEM包下载地址是：http://rubygems.org/ ，在这里搜索需要的GEM包即可。

假设你已经下载了GEM文件在本地，路径为 D:\gemFile，你需要把CMD的文件切换到该目录，具体如下：

D:
D:>cd gemFile
D:\gemFile> gem install --local compass.gem

• 与在线安装的区别仅仅是多了一个参数 –local。
• 此处compass是你要安装的gem包的文件名。

你可以使用上述任何一种方法安装sass与compass，但是请注意，如果你安装的SASS不是Compass要求的版本，会导致Compass安装不成功。

另外，更新GEM的版本，可以输入命令：

gem update --system

查看已经安装的GEM包，可以输入命令：

gem list

如何使用SASS？

假设你现在已经对SASS有了最初步的了解，你应该知道，在命令行下这样输入即可进行对当前目录下的test.scss文件进行监听，你在修改并保存这个sass文件的同时，sass将会自动将其编译成test.css：

sass test.scss test.css

当然，sass也可以对整个文件夹下sass文件进行监听并编译：

sass DirSASS DirCSS

如果你对SASS还不是很了解，请看这里。

如何使用Compass？

假设你已经安装了Compass，你可以在command里这样创建一个项目：

compass create myproject

然后在编写完代码后编译它：

compass compile

更多的Compass介绍，请看这里。

如何更新或卸载SASS/Compass？

查找服务器源的更新，你可以在command下输入：

gem query –remote

Ruby包允许多个不同版本共存，因此如果你需要更新某个包，直接安装可能不会覆盖旧的版本（SASS与Compass是否会这样未知）。

否则，你需要卸载它：

gem uninstall sass

如果此时你已经安装了多个版本，CMD会提醒你选择卸载：

Select gem to uninstall:
     1. deprecated-2.0.1
     2. deprecated-3.0.0
     3. All versions

如果卸载的gem依赖其他的gem，会有以下提示信息：

You have requested to uninstall the gem:
     deprecated-3.0.0
   dbi-0.4.3 depends on [deprecated (>= 2.0.0)]
If you remove this gems, one or more dependencies will not be met.
Continue with Uninstall? [Yn]

SASS/Compass的图形化界面

无论SASS还是Compass的命令行形式，对于很多开发者来说仍然不够友好，在此，有一些图形化的界面可供选择：

• Compass.app，售价10美元。
• Koala，免费。

SASS的调试

我们在浏览器开发工具（如Firebug）内只能看到其对应的css样式，而不能直接看到其对应的SASS样式，如果能够直接看到sass样式，就可以迅速定位相应代码，方便调试。在SASS 3.3 中已经实现了这个功能，但我们需要进行一些设置，简单地说（仅介绍Chrome下的设置，版本：33）：

1、如果是本地调试，需要搭建服务器环境，比如apache。

2、需要sass的sourcemap功能。

3、需要开启Chrome下的sourcemap功能。

第一步，如何安装Apache就省略了，请Google一下。

第二步，在command命令行开启文件或文件夹监控时，请加参数–sourcemap，如：

sass --sourcemap --watch scssFolder:cssFolder

开启sourcemap参数后，sass将会为每一个变化的sass文件生存map文件。

而Chrome可以识别该文件，从而直接将页面对应的sass样式显示在开发者工具（F12）上，因此，第三步：

请在Chrome打开：

chrome://flags

找到 启用开发者工具实验，开启它，重新启动chrome。

打开开发者工具（F12），并调出设置，找到选项：Sources -> Enable CSS source maps ，选中。此时如果页面使用了相应的map，将会显示map。

（截图省略）