1.背景介紹
CSS 是一門非程序式語言，沒有變量、函數、SCOPE（作用域），需要書寫大量看似沒有邏輯的代碼，不方便維護及擴 展，不利于復用，尤其對于非前端開發工程師來講，往往會因為缺少 CSS 編寫經驗而很難寫出組織良好且易于維護的 CSS 代碼。為了方便前端開發的工作量，出現了sass和less.
2.知識解剖
Sass背景介紹
Sass是對CSS（層疊樣式表）的語法的一種擴充，誕生于2007年，最早也是最成熟的一款CSS預處理器語言，它 可以使用變量、常量、嵌套、混 入、函數等功能，可以更有效有彈性的寫出CSS。Sass最后還是會編譯出合法 的CSS讓瀏覽器使用，也就是說它本身的語法并不太容易讓瀏覽器識別，因為 它不是標準的CSS格式，在它的 語法內部可以使用動態變量等，所以它更像一種極簡單的動態語言。 其實現在的Sass已經有了兩套語法規則：一個依舊是用縮進作為分隔符來區分代碼塊的；另一套規則和CSS一 樣采用了大括號（｛｝）作為分隔符。后一種語法規則又名SCSS，在Sass3之后的版本都支持這種語法規則。
SASS是什么？
Sass（Syntactically Awesome Style Sheets）是一個相對新的編程語言，Sass為web前端開發而生，可以用它來定 義一套新的語法規則和函數，以加強和提升CSS。通過這種新的編程語言，你可以使用最高效的方式，以少量的代 碼創建復雜的設計。它改進并增強了CSS的能力，增加了變量，局部和函數這些特性。而這只使Sass一部分利器！
SASS的安裝
SASS是Ruby語言寫的，但是兩者的語法沒有關系。不懂Ruby，照樣使用。只是必須先安裝Ruby，然后再安裝SASS。
在系統上運行來安裝Ruby。添加Ruby的bin文件夾到PATH用戶變量和系統變量以使用 gem 命令工作，第二個和第三個框去要打勾。
在系統中打開命令提示符，然后輸入以下命令行
gem source -ahttp://rubygems.org/
gem sources -ahttp://ruby.taobao.org/
gem install sass
出現屏幕下方信息，表示SASS 安裝成功，(國內線路不穩定，需要多試幾次)。
SASS使用-文件明后綴
sass有兩種后綴名文件：一種后綴名為sass，不使用大括號和分號；另一種就是我們這里使用的scss文件，這種和 我們平時寫的css文件格式差不多，使用大括號和分號。而本教程中所說的所有sass文件都指后綴名為scss的文件。 在此也建議使用后綴名為scss的文件，以避免sass后綴名的嚴格格式要求報錯。
sass的導入
sass的導入(@import)規則和CSS的有所不同，編譯時會將@import的scss文件合并進來只生成一個CSS文件。但是如 果你在sass文件中導入css文件如@import 'reset.css'，那效果跟普通CSS導入樣式文件一樣，導入的css文件不會 合并到編譯后的文件中，而是以@import方式存在。 所有的sass導入文件都可以忽略后綴名.scss。一般來說基礎的文件命名方法以_開頭，如_mixin.scss。這種文件在 導入的時候可以不寫下劃線，可寫成@import "mixin"
sass的導入
sass的注釋
LESS的背景介紹
（2009年開源的一個項目，受Sass的影響較大，但又使用CSS的語法，讓大部分開發者和設計師更容易上手。LESS提供了 多種方式能平滑的將寫好的代碼轉化成標準的CSS代碼。
LESS的介紹
第一個，less是單獨的一種文件，可以理解為css的升級版，完全按照css寫也沒問題，不過它提供了很多便利的東 西， 可以省好多代碼量。第二個，html只認css,所以需要配套一些軟件將less解析成css,引用時候，直接引用css 就好。gulp,koala 都是常用的，Koala好像簡單且方便一點。 多種方式能平滑的將寫好的代碼轉化成標準的CSS代碼。
LESS的安裝
LESS的安裝和Sass安裝有所不同，他不需要依賴于Ruby環境，就能直接安裝使用。不過LESS安裝分為兩種：客戶端和 服務器端安裝。
less客戶端安裝
我們可以直接在客戶端使用“.less”（LESS源文件），只需要在官網載一個Javascript腳本文件主“less.js”，然后 在我們需要引入LESS源文件的HTML的中加入如下代碼。
需要注意的是：在引入“.less”文件中，“link”的“rel”屬性要設置為“stylesheet/less”。還有更重要的一 點需要注意的是：LESS源文件一定要在“less.js”引入之前引入，這樣才能保證LESS源文件正確編譯解析。到這里就已經安裝好了。
less的使用
使用less，css文件的后綴名需要改為.less在html頁面中加入下面代碼。
less定義變量
less樣式嵌套
less嵌套規則
名稱更為簡短，并修改時易查找。
less樣式的傳參
4.常見問題
SASS/SCSS、LESS有什么區別?
4.解析問題
1.編譯環境不一樣
Sass的安裝需要Ruby環境，是在服務端處理的，而Less是需要引入less.js來處理Less代碼輸出css到瀏覽器，也可 以在開發環節使用Less，然后編譯成css文件，直接放到項目中，也有 Less.app、SimpleLess、CodeKit.app這樣 的工具，也有在線編譯地址。
2.變量符不一樣，LESS是@，而SCSS是$，而且變量的作用域也不一樣。
3.輸出設置，LESS沒有輸出設置，SASS提供4中輸出選項：NESTED, COMPACT, COMPRESSED 和 EXPANDED。
輸出樣式的風格可以有四種選擇，默認為nested
nested：嵌套縮進的css代碼
expanded：展開的多行css代碼
compact：簡潔格式的css代碼
compressed：壓縮后的css代碼
4.SASS支持條件語句，可以使用IF{}ELSE{},FOR{}循環等等。而LESS不支持。
5.引用外部CSS文件。
scss引用的外部文件命名必須以_開頭, 如下例所示:其中_test1.scss、_test2.scss、_test3.scss文件分別設置 的h1 h2 h3。文件名如果以下劃線_開頭的話，Sass會認為該文件是一個引用文件，不會將其編譯為css文件。
6.SASS和LESS的工具庫不同。
Sass有工具庫Compass, 簡單說，Sass和Compass的關系有點像Javascript和jQuery的關系,Compass是Sass的工具庫。 在它的基礎上，封裝了一系列有用的模塊和模板，補充強化了Sass的功能。 Less有UI組件庫Bootstrap,Bootstrap是web前端開發中一個比較有名的前端UI組件庫，Bootstrap的樣式文件部分 源碼就是采用Less語法編寫。
5.參考文獻
參考一：SASS入門教程及用法指南
參考二：深入理解CSS塊級(block)元素和內聯(inline)元素
參考三：初步認識 LESS
參考四：sass、less和stylus的安裝使用和入門實踐
參考五：sass語法
參考六：less的一些用法整理
參考七：LESS使用簡介
