开发环境:win7
开发工具:sublime
一、安装工具,工欲善其事,必先利其器。
1,安装ruby。
因为SASS的编译器是Ruby语言写的,所以必须先安装ruby。
2,ruby环境下安装sass
安装好ruby后,打开命令行工具输入:gem install sass 。到此,已经安装后sass了,但是为了更方便开发,我多加了一个第三步。
由于国内网络原因(你懂的),导致 rubygems.org 存放在 Amazon S3 上面的资源文件间歇性连接失败。
这时候我们可以通过gem sources
命令来配置源,先移除默认的https://rubygems.org
源,然后添加淘宝的源https://ruby.taobao.org/
,
然后查看下当前使用的源是哪个,如果是淘宝的,则表示可以输入sass安装命令gem install sass
了,
关于常用gem source命令可参看:常用的gem source
$ gem sources --remove https://rubygems.org/ $ gem sources -a https://ruby.taobao.org/ $ gem sources -l *** CURRENT SOURCES *** https://ruby.taobao.org # 请确保只有 ruby.taobao.org $ gem install sass
3,让sublime支持sass语法
如果不安装任何插件,在编辑器里写sass里是没有任何高亮,补全的提示。
二、使用sass
1,基本用法
sass index.scss index.css
sass文件的后缀名为scss(sass css)
2,带编译风格的用法
sass --style compressed test.sass test.css
* nested:嵌套缩进的css代码,它是默认值。
* expanded:没有缩进的、扩展的css代码。
* compact:简洁格式的css代码。
* compressed:压缩后的css代码。
3,监听文件变化
sass --watch input.scss:output.css
4,监听目录变化
sass --watch app/sass:public/stylesheets
三、sass语法
网上很多,暂不赘述,有兴趣访问yuanyifeng老师的教程:sass用法指南