SASS的一些使用体会（安装-配置-开启firefox的调试）
对CSS预处理这个东西的看法，基本就是2种
第一种：不就是css吗，我会写就好了搞得那么复杂干嘛
第二种：感觉这个东西非常有必要，它规范了代码，使开发变得更轻松
好吧以前我是第一种，并且觉得又要配置环境，又要按照他的写法非常的麻烦！用了一阵子之后发现有点离不开它了！囧~~
实际上很多东西不是你主观认为他没有意义就不去用。。。毕竟它存在，而且大公司都在用，这就说明着这个东西肯定有优点！
好吧，我用的是sass然后对nodeJS至今还是有点小抵触。。。我就叛逆了~~吐槽结束！！！
在线测试版：http://sassmeister.com/
然后什么情况要用到mixins看着bootstrap你就明白了-_-//
https://github.com/twbs/bootstrap/tree/master/less
先说安装吧！这个东西不用和nodejs那样搞得那么复杂
装个ruby。。。
....一路无话
然后安装
gem install sass
按回车键确认，等待一段时间就会提示你sass安装成功。最近因为墙的比较厉害，如果你没有安装成功，那么请参考下面的淘宝的RubyGems镜像安装sass，如果成功则忽略。
如果要安装beta版本的，可以在命令行中输入
em install sass --pre
你还可以从sass的Git repository来安装，git的命令行为
git clone git://github.com/nex3/sass.git
cd sass
rake install
升级sass版本的命令行为
gem update sass
查看sass版本的命令行为
sass -v
你也可以运行帮助命令行来查看你需要的命令
sass -h
淘宝RubyGems镜像安装 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
最后安装好了
然后写了。。。当然怎么写我在这里就不说了，毕竟大漠，阮一峰之类的大大都已经很久以前就写过了，参照他的文章看看就好了
然后该怎么调试呢
我是比较喜欢用firefox
首先我们需要安装一个FireSass for Firebug
如果百度百度不到最新版的，我这边到是有个
https://files.cnblogs.com/files/LoveOrHate/firesass_for_firebug-0.0.12-fx.xpi
然后scss的文件出现在firebug上咯
但是你会发现写的变量，函数都没有出来！怎么办呢
sass --watch --style expanded style.scss:style.css
这个时候我们找到项目目录里面的scss。开启调试模式
然后
然后你的一些mixin，@import，继承，参数全部都执行了！！
（最后还是把别人的简化复制一个出来，下面内容原地址：http://caibaojian.com/use-sass-compass-write-css.html）
1.Variables 變數
使用$作為開頭當參數
2.Nesting 巢狀結構
很清楚的知道 誰是誰的子元素，不用像以前一樣 寫一大排重復的開頭了
3.Mixins
其實就像function一樣使用，還可以帶參數
設定預設參數
4.Inheritance 繼承
另外幾個常用的功能
1.@import
可以將網站的各部份樣式拆開成_head.scss, _body.scss, _foot.scss放置在base資料夾下，可利用@import功能把3個檔納入到main.css裡
只要在main.scss加上
@import "base/head"; @import "base/body"; @import "base/foot";
_head.scss, _body.scss, _foot.scss 這些檔案都不會被編譯成css，記得檔案名稱需以 _ 底線作開頭!
2.算數 
3.顏色功能
lighten(red, 50%) //增亮50% darken(blue, 50%) //變暗50%
更多功能參見官方說明
http://www.w3cplus.com/preprocessor/getting-started-with-sass-part-1.html
http://www.w3cplus.com/preprocessor/getting-started-with-sass-part-2.html
