SASS的一些使用體會（安裝-配置-開啓firefox的調試）

對CSS預處理這個東西的見解，基本就是2種

第一種：不就是css嗎，我會寫就行了搞得那麼複雜幹嗎

第二種：感受這個東西很是有必要，它規範了代碼，使開發變得更輕鬆

好吧之前我是第一種，而且以爲又要配置環境，又要按照他的寫法很是的麻煩！用了一陣子以後發現有點離不開它了！囧~~

實際上不少東西不是你主觀認爲他沒有意義就不去用。。。畢竟它存在，並且大公司都在用，這就說明着這個東西確定有優勢！

好吧，我用的是sass而後對nodeJS至今仍是有點小抵觸。。。我就叛逆了~~吐槽結束！！！

 

在線測試版：http://sassmeister.com/

而後什麼狀況要用到mixins看着bootstrap你就明白了-_-//

 https://github.com/twbs/bootstrap/tree/master/less

 

 

 

先說安裝吧！這個東西不用和nodejs那樣搞得那麼複雜

裝個ruby。。。

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

最後安裝好了

而後寫了。。。固然怎麼寫我在這裏就不說了，畢竟大漠，阮一峯之類的大大都已經好久之前就寫過了，參照他的文章看看就行了

大漠sass基本寫法 阮一峯SASS用法指南

 

而後該怎麼調試呢

 

我是比較喜歡用firefox

首先咱們須要安裝一個FireSass for Firebug

若是百度百度不到最新版的，我這邊到是有個

 

http://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