一. Sass/Scss、Less是什麼?
Sass (Syntactically Awesome Stylesheets)是一種動態樣式語言，Sass語法屬於縮排語法，比css比多出好些功能(如變量、嵌套、運算,混入(Mixin)、繼承、顏色處理，函數等)，更容易閱讀。
Sass與Scss是什麼關係?
Sass的縮排語法，對於寫慣css前端的web開發者來說很不直觀，也不能將css代碼加入到Sass裏面，因此sass語法進行了改良，Sass 3就變成了Scss(sassy css)。與原來的語法兼容，只是用{}取代了原來的縮進。
Less也是一種動態樣式語言. 對CSS賦予了動態語言的特性，如變量，繼承，運算， 函數. Less 既可以在客戶端上運行 (支持IE 6+, Webkit, Firefox)，也可在服務端運行 (藉助 Node.js)。
二. Sass/Scss與Less區別
1.編譯環境不一樣
Sass的安裝需要Ruby環境，是在服務端處理的，而Less是需要引入less.js來處理Less代碼輸出css到瀏覽器，也可以在開發環節使用Less，然後編譯成css文件，直接放到項目中，也有 Less.app、SimpleLess、CodeKit.app這樣的工具，也有在線編譯地址。
2.變量符不一樣，Less是@，而Scss是$，而且變量的作用域也不一樣。
Less-作用域 @color: #00c; /* 藍色 */ #header { @color: #c00; /* red */ border: 1px solid @color; /* 紅色邊框 */ }
#footer {
border: 1px solid @color; / 藍色邊框 /
}
Less-作用域編譯後
#header{border:1px solid #cc0000;}
#footer{border:1px solid #0000cc;}
scss-作用域
$color: #00c; / 藍色 /
#header {
$color: #c00; / red /
border: 1px solid $color; / 紅色邊框 /
}
#footer {
border: 1px solid $color; / 藍色邊框 /
}
Sass-作用域編譯後
#header{border:1px solid #c00}
#footer{border:1px solid #c00}
我們可以看出來，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不支持。
/* Sample Sass “if” statement */
@if lightness($color) > 30% {
} @else {
}
/ Sample Sass “for” loop /
@for KaTeX parse error: Expected '}', got '#' at position 44: … style="color: #̲ff0000;">
.bo…i} {
border: #{$i}px solid blue;
}
}
5. 引用外部CSS文件
scss引用的外部文件命名必須以_開頭, 如下例所示:其中_test1.scss、_test2.scss、_test3.scss文件分別設置的h1 h2 h3。文件名如果以下劃線_開頭的話，Sass會認爲該文件是一個引用文件，不會將其編譯爲css文件.
// 源代碼： @import "_test1.scss"; @import "_test2.scss"; @import "_test3.scss";
// 編譯後： h1 { font-size: 17px; }
h2 {
font-size: 17px;
}
h3 {
font-size: 17px;
}
Less引用外部文件和css中的@import沒什麼差異。
6.Sass和Less的工具庫不同
Sass有工具庫Compass, 簡單說，Sass和Compass的關係有點像Javascript和jQuery的關係,Compass是Sass的工具庫。在它的基礎上，封裝了一系列有用的模塊和模板，補充強化了Sass的功能。
Less有UI組件庫Bootstrap,Bootstrap是web前端開發中一個比較有名的前端UI組件庫，Bootstrap的樣式文件部分源碼就是採用Less語法編寫。
三. 總結
不管是Sass，還是Less，都可以視爲一種基於CSS之上的高級語言，其目的是使得CSS開發更靈活和更強大，Sass的功能比Less強大,基本可以說是一種真正的編程語言了，Less則相對清晰明瞭,易於上手,對編譯環境要求比較寬鬆。然而編譯Sass要安裝Ruby,而Ruby官網在國內訪問不了。