SASS是一種CSS開發工具，提供了許多便利的寫法，大大節省了設計者的時間，使得CSS的開發變得簡單和可維護，字尾名.scss
SASS是用Ruby語言寫的，兩者的語法沒有關係，使用時先安裝Ruby，再安裝SASS。

安裝好Ruby後，輸入gem install sass就可以使用了。

sass test.scss test.css   //將scss檔案轉化為css格式並儲存成檔案

Less是一門CSS預處理語言，它擴充套件了CSS語言，增加了變數，Mixin，函式等特性，使CSS更易維護和擴充套件。Less可以執行在Node或者瀏覽器端。字尾名.less
安裝 npm instll –g less

less test.less test.css  //將less檔案轉化為css格式並儲存為檔案

less的引用

(1)可直接在script標籤中引入less.js，實現瀏覽器中將less預編譯為CSS樣式

(2)同時less也存在內聯樣式和外聯樣式

內聯樣式：

<style type=’text/less’>
//less程式碼
</style>

外聯樣式

<link rel=’stylesheet/less’ type=’text/css’ href=’xxx.less’/>

SASS與LESS的區別

（1）編譯的環境不一樣，SASS使用的是Ruby環境，是在服務端處理的。LESS需要引入less.js來處理LESS程式碼輸出CSS到瀏覽器，也可以在開發環節使用LESS，然後編譯成css檔案

（2）變數符不一樣，LESS是@，Sass是$，而且變數的作用域也不一樣。

（3）LESS沒有輸出設定，Sass提供4種輸出選項，nested（巢狀縮排的CSS程式碼，是預設值），compact（簡潔格式的css程式碼），compressed（壓縮後的css程式碼）和expanded（沒有縮排的、擴充套件的css程式碼）。在生產環境中一般使用compressed，如sass –style compressed test.sass test.css。

（4）Sass支援條件語句，可以使用if else，for迴圈等，而LESS不支援。

（5）SASS引用的外部檔案命名必須以_開頭。檔名如果以下劃線開頭，Sass會認為該檔案是一個引用檔案，不會將其便以為CSS檔案。LESS引用外部檔案和css中的@import沒有什麼差異。

（6）Sass和less的工具庫不同

Sass有工具庫Compass（如同JavaScript和Jquery的關係），Compass在SASS的基礎上封裝了一系列有用的模組和模板，補充強化了SASS的功能。

LESS有UI元件庫Boostrap，boostrap的樣式檔案部分原始碼才引用了LESS的語法編寫。

總結：SASS和LESS都是基於CSS之上的高階語言，目的是使得CSS開發更加靈活，更加強大。編譯SASS要安裝Ruby，而Ruby在國內訪問不了，因此在實際開發中更加傾向於LESS。