安裝和使用sass

在安裝和使用sass以前，須要一些準備條件：

1. 文件夾---存放.scss 或 .sass；

2. 編輯器，咱們推薦使用Sublime Text 2 或者 3；

3. 你的電腦須要安裝Ruby，由於sass是依賴於Ruby的。ruby下載地址http://rubyinstaller.org/downloads/

使用命令行安裝sass：

gem install sass

出現錯誤：

C:\Users\zhaoliang>gem install sass
ERROR:  Could not find a valid gem 'sass' (>= 0), here is why:
          Unable to download data from https://rubygems.org/ - SSL_connect returned=1 errno=0 state=SSLv3 read server 
certificate B: certificate verify failed (https://api.rubygems.org/specs.4.8.gz)

命令換成：gem install sass --source http://rubygems.org

使用命令，查看是否安裝成功，以下顯示錶示安裝成功：

C:\Users\zhaoliang>sass -v
Sass 3.4.22 (Selective Steve)

簡單使用Sass

在sass文件夾下建立demo1.scss文件，內容：

$myColor: #ccc; #page { color: $myColor; }

使用命令行：

sass demo1.scss demo1.css

會在同一個文件夾下生成一個demo1.css文件，內容：

#page { color: #cccccc; }

提升生產力的Sass

以下，在學習sass以前咱們大概都是這麼來寫css的：

ul.nav {float: right} ul.nav li {float: left;} ul.nav li a {color: #111} ul.nav li.current {font-weight: bold;}

但，有了sass後，那就方便多了：

ul.nav {  float: right; li {  float: left; a {  color: #111; } &.current { font-weight: bold; } } }

經過編譯，獲得css：

ul.nav { float: right; } ul.nav li { float: left; } ul.nav li a { color: #111; } ul.nav li.current { font-weight: bold; }

除了排版不同以外，再也看不出有什麼區別。但使用sass寫出來的樣式結構，不只井井有條，意思明確，並且編碼量明顯減小。