认识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安装不成功的提示。
其他问题:
-
如果你使用了代理连接互联网,你可能需要设置GEM,否则它将不能获得网上的资源,设置方法:
export http_proxy=’http://username:password@url:port/’
如果国外服务器不给力,也可以把GEM的源换成国内的,比如淘宝:
你需要在CMD下设置:
gem sources -a http://ruby.taobao.org/
-
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。
(截图省略)