最近接觸了一款css預處理器——SASS，並部署應用於新項目中
目前體驗上非常滿意，達到了預想中的效果，個人感覺比以前用過的LESS語言更加豐富、更加優秀、更具有性價比
SASS簡化了我們的css工作流，在樣式設計時更輕松，並且更易於日常閱讀維護
css本身是層疊樣式表，並不算一門編程語言，為了豐富它的編程元素，於是出現了專為css而生的css預處理器，某種程度上也可以理解為編程語言
而SASS正是其中之一，它提供了變量、繼承、語句等多樣化用法，像編程語言一樣書寫css
SASS的安裝與使用
安裝
首先需要安裝ruby，然后才可以安裝SASS
ruby是啥樓主不懂也不關心，只知道SASS是ruby開發的，寫SASS不需要懂ruby，但是想安裝SASS得先安裝ruby
網上下載一個適合自己開發環境的Ruby版本，安裝后運行命令行
gem -v ruby -v
運行成功后返回版本號
本來可以直接安裝SASS
gem install sass
因為被牆應該不會成功，於是只好迂回到淘寶RubyGems鏡像安裝SASS
gem sources --remove https://rubygems.org/ gem sources -a https://ruby.taobao.org/ gem sources -l
運行成功最后返回源指向路徑，注意源指向路徑必須為唯一
再次安裝SASS
gem install sass
升級SASS
gem update sass
使用
運行命令行直接看編譯后的css代碼，這樣並沒什么實際作用
sass init.sass
把SASS文件編譯轉化為css文件
sass init.scss init.css
我們有SASS作為開發文件，所以一般在編譯CSS文件時候直接選擇壓縮
sass --style compressed init.sass init.css
SASS提供了四種編譯風格，自己私下可以逐一體驗
nested：嵌套並且縮進，默認值 expanded：嵌套但不縮進 compact：簡潔格式 compressed：壓縮
監聽SASS文件，發生變動時自動編譯轉化為css文件
sass --watch init.scss:init.css --style compressed
編譯過程中，如有語法錯誤則會編譯失敗，命令行與css文件都會提供具體錯誤信息
安裝WebStorm編輯器
Sublime、Dreamweaver都弱爆了，下載安裝個WebStorm編輯器才能和SASS好好玩耍
國際慣例，曬一下WebStorm編輯器
注意文件開頭聲明UTF8編碼，不然注釋里如有中文編譯時會報錯
@charset "utf-8"
Sublime編輯器安裝SASS插件
Package Control組件安裝
首先，【Ctrl+`】調出 Sonsole（QQ輸入法快捷鍵會沖突，只能先去系統的輸入法屬性設置里取消熱鍵切換至QQ拼音法了）
然后，粘貼如下代碼，回車
sublime 2
import urllib2,os; pf='Package Control.sublime-package'; ipp = sublime.installed_packages_path(); os.makedirs( ipp ) if not os.path.exists(ipp) else None; urllib2.install_opener( urllib2.build_opener( urllib2.ProxyHandler( ))); open( os.path.join( ipp, pf), 'wb' ).write( urllib2.urlopen( 'http://sublime.wbond.net/' +pf.replace( ' ','%20' )).read()); print( 'Please restart Sublime Text to finish installation')
sublime 3
import urllib.request,os; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); open(os.path.join(ipp, pf), 'wb').write(urllib.request.urlopen( 'http://sublime.wbond.net/' + pf.replace(' ','%20')).read())
最后，按提示重啟，【Ctrl+Shift+P】調出命令面板輸入 install，在下拉提示列表中選擇 Install Package，輸入 sass，在下拉提示列表中選擇 SASS
SASS語法
基本用法
變量
$cl: #333 body color: $cl
計算
$sz: 14px $ln: $sz * 1.5
嵌套（選擇器、屬性、偽類三種嵌套方式）
.index border: 1px solid #ccc top: 3px solid #999 radius: 5px a color: #666 &:hover,&.active #333
注釋
/* 首頁 */ //導航條
代碼重用
繼承
html height: 100% .index @extend html
混合
@mixin txt () overflow: hidden white-space: nowrap text-overflow: ellipsis @mixin rads ($v: 2px) -webkit-border-radius: $v -moz-border-radius: $v border-radius: $v .index width: 200px @include txt @include rads(50%)
文件引用
@import '../base/set'
高級語句
條件
$cl: #333 .index @if lightness($cl) > 30% color: #666 @else color: #999
循環語句
@for $i from 1 to 10
.module_#{$i}
background: url(../image/module_#{i}.png) 50% no-repeat
$i: 0
@while $i < 10
$i: $i + 1
.module_#{$i}
background: url(../image/module_#{i}.png) 50% no-repeat
$arr: (1, 2, 3, 4, 5, 6, 7, 8, 9, 10)
@each $i in $arr
.module_#{$i}
background: url(../image/module_#{i}.png) 50% no-repeat
自定義函數
@function large ($v) @return $v * 1.5 .index font-size: large(14px)
還有顏色函數等，暫時沒用得上的切合場景，API不算很少；SASS/SCSS/LESS不能直接與CSS比較誰更好，SASS/SCSS/LESS只是豐富CSS書寫方式的工具，最終頁面引用文件還是需要編譯轉化后的CSS文件