PS: 本文操作均在Windows下
Sass
Sass 是采用 Ruby 語(yǔ)言編寫的一款 CSS 預(yù)處理語(yǔ)言，它誕生于2007年 Sass 是一門高于 CSS 的元語(yǔ)言，它能用來(lái)清晰地、結(jié)構(gòu)化地描述文件樣式，有著比普通 CSS 更加強(qiáng)大的功能。Sass 能夠提供更簡(jiǎn)潔、更優(yōu)雅的語(yǔ)法，同時(shí)提供多種功能來(lái)創(chuàng)建可維護(hù)和管理的樣式表。
Sass和Scss的關(guān)系
Sass 和 Scss 其實(shí)是同一種東西，我們平時(shí)都稱之為 Sass，兩者之間不同之處有以下兩點(diǎn)：
- 文件擴(kuò)展名不同，Sass 是以“.sass”后綴為擴(kuò)展名，而 SCSS 是以“.scss”后綴為擴(kuò)展名
- 語(yǔ)法書寫方式不同，Sass 是以嚴(yán)格的縮進(jìn)式語(yǔ)法規(guī)則來(lái)書寫，不帶大括號(hào)({})和分號(hào)(;)，而 SCSS 的語(yǔ)法書寫和我們的 CSS 語(yǔ)法書寫方式非常類似。
Sass/Scss和純 CSS 寫法
-
Sass 和 CSS 寫法有差別：
Sass 和 CSS 寫法的確存在一定的差異，由于 Sass 是基于 Ruby 寫出來(lái)，所以其延續(xù)了 Ruby 的書寫規(guī)范。在書寫 Sass 時(shí)不帶有大括號(hào)和分號(hào)，其主要是依靠嚴(yán)格的縮進(jìn)方式來(lái)控制的。如：
Sass寫法：
body color: #fff background: #f36
而在 CSS 我們是這樣書寫：
body**{** color:#fff; background:#f36;**}**
-
SCSS 和 CSS 寫法無(wú)差別：
SCSS 和 CSS 寫法無(wú)差別，這也是 Sass 后來(lái)越來(lái)越受大眾喜歡原因之一。簡(jiǎn)單點(diǎn)說，把你現(xiàn)有的“.css”文件直接修改成“.scss”即可使用。
Sass當(dāng)中的注釋
sass當(dāng)中的注釋有兩種：
1. // 這種注釋在編譯后不會(huì)出現(xiàn)在代碼當(dāng)中
2. /**/ 這種注釋編譯后會(huì)出現(xiàn)在代碼中
Ruby 安裝
裝sass之前先確認(rèn)裝了ruby。先導(dǎo)官網(wǎng)下載個(gè)ruby
在安裝的時(shí)候，請(qǐng)勾選 Add Ruby executables to your PATH 這個(gè)選項(xiàng)，添加環(huán)境變量，不然以后使用編譯軟件的時(shí)候會(huì)提示找不到ruby環(huán)境
Ruby 的包管理工具 Gem 換源
“Ruby淘寶源“ 聲明了：RubyGems 鏡像的管理工作以后將交由 Ruby China 負(fù)責(zé)，以便能有更多的社區(qū)愛好者參與進(jìn)來(lái)，保持持續(xù)發(fā)展。所以我建議直接將源更換到Ruby China。詳見Ruby淘寶源
- gem 查看當(dāng)前源：
gem source 或 gem source -l
效果如下：
- gem 換源：
先移除
gem sources --remove https://rubygems.org
再添加
gem sources --add https://gems.ruby-china.org
- 如在換源出現(xiàn)以下錯(cuò)誤時(shí)( 如果你系統(tǒng)不支持https )
換源失敗
有一種解決方式： gem sources --add http://gems.ruby-china.org/
這里注意是http,不是https
- gem 換源確認(rèn)(查看是否成功)：
gem source 或 gem source -l
Sass安裝
安裝完 ruby 之后，在開始菜單中，找到剛才我們安裝的 ruby，打開 Start Command Prompt with Ruby
在命令行中輸入
gem install sass
安裝成功后如圖：
可以使用兩種方式查看安裝后的sass版本
-
gem list列出本地的所有ruby程序包
- 使用
sass -v
卸載（刪除）Sass
在常期使用的時(shí)候難免會(huì)碰到無(wú)法解決的問題，有時(shí)候可能需要卸載 Sass，然后再重新安裝 Sass。那么怎么卸載 Sass 呢？
其實(shí)他也就是一句命令的事情：
gem uninstall sass
這樣就卸載了 Sass ，但這行命令基本上是使用不上。
Compass的安裝
Compass 是一個(gè)成熟的、基于 Sass 開發(fā)的一個(gè)框架，這里面集成了很多寫好的 mixins 和 Sass 函數(shù)
安裝
gem install compass
查看版本
compass -v
成功如圖：
Sass的編譯
- 命令編譯
來(lái)看一個(gè)簡(jiǎn)單的示例，假設(shè)我本地有一個(gè)項(xiàng)目，我要把項(xiàng)目中“bootstrap.scss”編譯出“bootstrap.css”文件，并且將編譯出來(lái)的文件放在“css”文件夾中，我就可以在我的命令終端中執(zhí)行：
sass --watch sass/bootstrap.scss:css/bootstrap.css
一旦我的 bootstrap.scss 文件有任何修改，只要我重新保存了修改的文件，命令終端就能監(jiān)測(cè)，并重新編譯出文件：
GUI工具編譯
Koala (http://koala-app.com/)
Compass.app（http://compass.kkbox.com/）
Scout（http://mhs.github.io/scout-app/）
CodeKit（https://incident57.com/codekit/index.html）
Prepros（https://prepros.io/）
相比之下，我比較推薦使用以下兩個(gè)：
Koala (http://www.w3cplus.com/preprocessor/sass-gui-tool-koala.html)
CodeKit (http://www.w3cplus.com/preprocessor/sass-gui-tool-codekit.html)自動(dòng)化編譯
喜歡自動(dòng)化研究的, 應(yīng)該都知道 **Grunt **和 **Gulp **這兩個(gè)東東。如果您正在使用其中的任何一種
