CSS（層疊樣式表）是一門非程序式語言，入門學(xué)習(xí)使用非常直觀方便，沒有變量、函數(shù)、SCOPE（作用域），需要書寫大量看似沒有邏輯的代碼，不方便維護(hù)及擴(kuò)展，不利于復(fù)用。
為了方便前端開發(fā)的工作量，出現(xiàn)了sass和less。
SASS
是一種對(duì)css的一種擴(kuò)展提升，增加了規(guī)則、變量、混入、選擇器、繼承等等特性?？梢岳斫鉃橛胘s的方式去書寫，然后編譯成css。
比如說，sass中可以把反復(fù)使用的css屬性值定義成變量，然后通過變量名來引用它們，而無需重復(fù)書寫這一屬性值。
less
LESS，受Sass的影響較大，也使用CSS的語法，讓大部分開發(fā)者和設(shè)計(jì)師更容易上手。
LESS保留了css的任何功能，同時(shí)提供了多種方式能平滑的將寫好的代碼轉(zhuǎn)化成標(biāo)準(zhǔn)的CSS代碼，可以在任何使用隨時(shí)切換到css的語法進(jìn)行書寫。
使用方法
傳統(tǒng)的css可以直接被html引用，
由于sass和less使用了類似JavaScript的方式去書寫，所以必須要經(jīng)過編譯生成css，而html引用只能引用編譯之后的css文件。
sass和less的區(qū)別
- 編譯環(huán)境
Sass的安裝需要Ruby環(huán)境，是在服務(wù)端處理。
Less不需要安裝其他語言，在Node中進(jìn)行編譯。只需要導(dǎo)入less.js來處理然后輸出css到瀏覽器。是在客戶端處理。
當(dāng)然Less也提供服務(wù)器端的編譯功能。
- 變量符不同，變量的作用域不同
變量符：Less是@，而Scss是$。
作用域：
// Less-作用域
@color: #00c; /* 藍(lán)色 */
#header {
@color: #c00; /* red */
border: 1px solid @color; /* 紅色邊框 */
}
#footer {
border: 1px solid @color; /* 藍(lán)色邊框 */
}
// Less-作用域編譯后
#header{border:1px solid #cc0000;} // 紅色邊框
#footer{border:1px solid #0000cc;} // 藍(lán)色
// scss-作用域
$color: #00c; /* 藍(lán)色 */
#header {
$color: #c00; /* red */
border: 1px solid $color; /* 紅色邊框 */
}
#footer {
border: 1px solid $color; /* 藍(lán)色邊框 */
}
// Sass-作用域編譯后
#header{border:1px solid #c00} // 紅色邊框
#footer{border:1px solid #c00}// 紅色邊框
輸出設(shè)置
Less沒有輸出設(shè)置。
Sass提供4中輸出選項(xiàng)：
nested 嵌套縮進(jìn)，
compact 簡(jiǎn)潔格式，
compressed 壓縮后，
expanded 展開的多行。Sass支持條件語句，可以使用if{}else{},for{}循環(huán)等等。而Less不支持。
- 引用外部CSS文件
scss引用的外部文件命名必須以_開頭。文件名如果以下劃線_開頭的話，Sass會(huì)認(rèn)為該文件是一個(gè)引用文件，不會(huì)將其編譯為css文件。
Less引用外部文件和css中的@import沒什么差異。
工具庫不同
SCompass是Sass的工具庫。是在它的基礎(chǔ)上，封裝了一系列有用的模塊和模板，補(bǔ)充強(qiáng)化了Sass的功能。
Less有UI組件庫Bootstrap,iview等。繼承
Sass中，寫好的選擇器進(jìn)行集成，需要@extend關(guān)鍵字。
Less中，直接寫入即可：.be-extend-class;Mixin
Sass中，需要進(jìn)行Mixin操作的選擇器需要@mixin關(guān)鍵字，選擇器后可以傳入變量和默認(rèn)值。嵌套(相同點(diǎn)）
Sass和Less均允許元素嵌套。如果父子選擇器均用逗號(hào)分開，那么編譯時(shí)會(huì)按結(jié)合律拆開編譯。
Sass和Less指代上層元素均使用&符號(hào)。
總結(jié)
不管是Sass，還是Less，都可以視為一種基于CSS之上的高級(jí)語言，其目的是使得CSS開發(fā)更靈活和更強(qiáng)大。 Sass的功能比Less強(qiáng)大,基本可以說是一種真正的編程語言了，Less則相對(duì)清晰明了,易于上手,對(duì)編譯環(huán)境要求比較寬松?？紤]到編譯Sass要安裝Ruby,而Ruby官網(wǎng)在國內(nèi)訪問不了,個(gè)人在實(shí)際開發(fā)中更傾向于選擇Less。
