江左梅郎2017/01/20         
Sass是最成熟、稳定、强大、专业的CSS扩展语言
compass是一个开源的css编写框架。是在sass基础之上二次开发的。
首先我们先聊一聊css的痛点,在编写css时我们经常会遇到这样的问题:
1.css代码不好组织维护。
2.css3书写前缀。
3.兼容ie低版本。
4.sprite 图片文件中哪怕只有一个组成图片增加了1px的高度,有时整个sprite相关的css都要重新书写。
...
使用Sass和compass可以解决在编写css时痛点,能够有效的组织样式,图片,字体等项目文件。
sass是由ruby开发的,所以安装saa前需要先安装ruby,点击http://rubyinstaller.org/downloads,点击下载适合你的ruby版本。
在安装的时候,请勾选Add Ruby executables to your PATH这个选项,添加环境变量,接下来一路next即可。
gem与ruby的关系,就好比nodejs与npm的关系,安装ruby时也一起安装了gem,建议修改gem源为国内的,原因你懂得 。
删除gem源
gem source --remove https://rubygems.org/
设置新的gem源
gem source -a http://gems.ruby-china.org
安装sass
gem install sass
安装compass
gem install compass
新建一个项目learn-sass-compass,进入这个项目,然后创建一个compass项目
compass项目创建成功后,我们看下成功提示,其中有几点需要我们注意:
1.sass文件以下划线开头被认为是局部文件,不会被编译成单独的css文件。
2.你可以通过config.rb配置你的项目。
3.按需编译指令为compass compile [path/to/project]
4.监听项目变化指令compass watch [path/to/project]
ok,你现在的项目应该是这个样子。
sass文件最终要被编译成css文件才能引入到页面中,我们可以执行compass watch来监听sass文件的变化,sass文件一旦有变化,compass会自动执行将sass文件编译成css文件。可以通过ctrl+c退出。
sass是CSS扩展的语言,所以sass支持css语法,除此之外,sass还有支持变量、嵌套、继承、复用等诸多特性。
由于篇幅有限,关于sass与compass特性介绍,以及如何解决css痛点的介绍将另起一章。