Sass安裝

安裝Sass和Compass

sass基于Ruby語(yǔ)言開(kāi)發(fā)而成个少，因?yàn)榘惭bsass前需要安裝Ruby蔽介。
注：mac環(huán)境下自帶Ruby而無(wú)需再安裝Ruby干花！
windows下安裝Sass首先需要安裝Ruby绪氛，先從官網(wǎng)下載Ruby并安裝。安裝過(guò)程中注意勾選Add Ruby executables to your PATH添加到系統(tǒng)環(huán)境變量名斟。如下圖：

image

安裝完成后需測(cè)試安裝有沒(méi)有成功脑慧，運(yùn)行CMD輸入以下命令：

ruby -v
// 如安裝成功會(huì)打印
ruby 2.2.2p95(2015-04-13 revision 50295) [i386-mingw32]

如上已經(jīng)安裝成功。但因?yàn)閲?guó)內(nèi)網(wǎng)絡(luò)的問(wèn)題導(dǎo)致gem源間歇性中斷因此我們需要更換gem源砰盐。（使用淘寶的gem源https://ruby.taobao.org/）如下：

//1.刪除原gem源
gem sources --remove https://rubygems.org/
//2.添加國(guó)內(nèi)淘寶鏡像源
gem sources -a https://ruby.taobao.org/
//3.打印是否替換成功
gem sources -l
//4.更換成功后打印如下
*** CURRENT SOURCES ***
https://ruby.taobao.org/

Ruby自帶一個(gè)叫做RubyGems的系統(tǒng)闷袒，用來(lái)安裝基于Ruby的軟件。我們可以使用這個(gè)系統(tǒng)來(lái)輕松地安裝sass和compass岩梳。要安裝最新版本的sass和compass霜运，如下：

// 安裝如下（如果mac安裝遇到權(quán)限問(wèn)題需加sudo）
gem install sass
gem install compass

在每一個(gè)安裝過(guò)程中，你都會(huì)看到如下輸出:

Fetching: sass-3.x.x.gem (100%)
Successfully installed sass-3.x.x
Parsing documentation for sass-3.x.x
Installing ri documentation for sass-3.x.x
Done installing documentation for sass after 6 secon
1 gem installed

安裝完成之后蒋腮，你應(yīng)該通過(guò)運(yùn)行下面的命令來(lái)確認(rèn)應(yīng)用已經(jīng)正確地安裝到了電腦中：

sass -v
Sass 3.x.x (Selective Steve)

compass -v
Compass 1.x.x (Polaris)
Copyright (c) 2008-2015 Chris Eppstein
Released under the MIT License.
Compass is charityware.
Please make a tax deductable donation for a worthy cause: http://umdf.org/compass

如下Sass常用更新淘捡、查看版本、Sass命令幫助等命令：

//更新sass
gem update sass

//查看sass版本
sass -v

//查看sass幫助
sass -h

編譯Sass

sass編譯有很多種方式池摧，如命令行編譯模式焦除、sublime插件SASS-Build、編譯軟件koala作彤、前端自動(dòng)化軟件codekit膘魄、Grunt打造前端自動(dòng)化工作流grunt-sass、Gulp打造前端自動(dòng)化工作流gulp-ruby-sass等竭讳。

命令行編譯

//單文件轉(zhuǎn)換命令
sass input.scss output.css

//單文件監(jiān)聽(tīng)命令
sass --watch input.scss:output.css

//如果你有很多的sass文件的目錄创葡，你也可以告訴sass監(jiān)聽(tīng)整個(gè)目錄：
sass --watch app/sass:public/stylesheets

命令行編譯配置選項(xiàng)

命令行編譯sass有配置選項(xiàng)，如編譯過(guò)后css排版绢慢、生成調(diào)試map灿渴、開(kāi)啟debug信息等，可通過(guò)使用命令sass -v查看詳細(xì)胰舆。我們一般常用兩種--style'' 骚露、 --sourcemap。

//編譯格式
sass --watch input.scss:output.css --style compact

//編譯添加調(diào)試map
sass --watch input.scss:output.css --sourcemap

//選擇編譯格式并添加調(diào)試map
sass --watch input.scss:output.css --style expanded --sourcemap

//開(kāi)啟debug信息
sass --watch input.scss:output.css --debug-info

--style表示解析后的css是什么排版格式;
sass內(nèi)置有四種編譯格式:nested缚窿、expanded棘幸、compact、compressed倦零。
--sourcemap表示開(kāi)啟sourcemap調(diào)試误续。開(kāi)啟sourcemap調(diào)試后吨悍，會(huì)生成一個(gè)后綴名為.css.map文件。

四種編譯排版演示

//未編譯樣式
.box {
  width: 300px;
  height: 400px;
  &-title {
    height: 30px;
    line-height: 30px;
  }
}

nested 編譯排版格式

/*命令行內(nèi)容*/
sass style.scss:style.css --style nested

/*編譯過(guò)后樣式*/
.box {
  width: 300px;
  height: 400px; }
  .box-title {
    height: 30px;
    line-height: 30px; }

expanded 編譯排版格式

/*命令行內(nèi)容*/
sass style.scss:style.css --style expanded

/*編譯過(guò)后樣式*/
.box {
  width: 300px;
  height: 400px;
}
.box-title {
  height: 30px;
  line-height: 30px;
}

compact 編譯排版格式

/*命令行內(nèi)容*/
sass style.scss:style.css --style compact

/*編譯過(guò)后樣式*/
.box { width: 300px; height: 400px; }
.box-title { height: 30px; line-height: 30px; }

compressed 編譯排版格式

/*命令行內(nèi)容*/
sass style.scss:style.css --style compressed

/*編譯過(guò)后樣式*/
.box{width:300px;height:400px}.box-title{height:30px;line-height:30px}

軟件方式編譯

koala是一個(gè)國(guó)產(chǎn)免費(fèi)前端預(yù)處理器語(yǔ)言圖形編譯工具蹋嵌，支持Less畜份、Sass、Compass欣尼、CoffeeScript，幫助web開(kāi)發(fā)者更高效地使用它們進(jìn)行開(kāi)發(fā)停蕉°倒模跨平臺(tái)運(yùn)行，完美兼容windows慧起、linux菇晃、mac。

下載Koala

鑒于koala是免費(fèi)編譯器蚓挤，簡(jiǎn)單操作如下圖: