Css、Sass和less的區別是什么

背景
CSS（層疊樣式表）是一門非程序式語言，入門學習使用非常直觀方便，但是對于一些比較復雜或者重用性比較強的項目來說，因為CSS沒有變量、函數、SCOPE（作用域），需要書寫大量看似沒有邏輯的代碼，不方便維護及擴展，不利于復用，尤其對于非前端開發工程師來講，往往會因為缺少 CSS 編寫經驗而很難寫出組織良好且易于維護的 CSS 代碼。為了方便前端開發的工作量，出現了sass和less。
SASS

Sass 擴展了 CSS3，增加了規則、變量、混入、選擇器、繼承等等特性。Sass 生成良好格式化的 CSS 代碼，易于組織和維護。

SASS是對CSS3(層疊樣式表)的語法的一種擴充，它可以使用巢狀、混入、選擇子繼承等功能，可以更有效有彈性的寫出Stylesheet。Sass最后還是會編譯出合法的CSS讓瀏覽可以使用，也就是說它本身的語法并不太容易讓瀏覽器識別(雖然它和CSS的語法非常的像，幾乎一樣)，因為它不是標準的CSS格式，在它的語法內部可以使用動態變量等，所以它更像一種極簡單的動態語言。

LESS

LESS是一種由Alexis Sellier設計的動態層疊樣式表語言。受Sass所影響，同時也影響了Sass的新語法:SCSS。

LESS是開源的，其第一個版本由Ruby寫成，但在后續的版本當中，Ruby逐漸被替換為JavaScript。受益于JavaScript，LESS可以在客戶端上運行(IE6+、Webkit、Firefox)，也可以在服務端運行(Node.js、Rhino)。

SASS和LESS的使用
傳統的css可以直接被html引用，但是sass和less由于使用了類似JavaScript的方式去書寫，所以必須要經過編譯生成css，而html引用只能引用編譯之后的css文件，雖然過程多了一層，但是畢竟sass/less在書寫的時候就方便很多，所以在我們使用sass/less之前，只要我們提前設置好，就可以直接生成對應的css文件，而我們只需要關心我們的sass/less文件即可。
Sass的語法規則，可以參考下SASS中文網：<u>https://www.sass.hk/</u>。
SASS技術的文件的后綴名有兩種形式：.sass和.scss。其實兩者都是同一種東西，兩種均可以可以通過編譯生成瀏覽器能識別的css文件。這兩種的區別：
1.
擴展名不同；
2.

SCSS 的語法書寫和CSS 語法書寫方式非常類似，.sass文件對代碼的排版有著非常嚴格的要求，而且沒有大括號，沒有分號；

Sass 語法
$font-stack: Helvetica, sans-serif //定義變量
$primary-color: #333 //定義變量
body
font: 100% $font-stack
color: $primary-color
SCSS 語法
$font-stack: Helvetica, sans-serif;
$primary-color: #333;
body {
font: 100% $font-stack;
color: $primary-color;
}
編譯出來的 CSS
body {
font: 100% Helvetica, sans-serif;
color: #333;
}
LESS技術的后綴名只有一種，就是.less，語法規則和sass大同小異，詳細可以參考less中文網<u>http://lesscss.cn/</u>。
LESS使用分為兩種：
1.直接在瀏覽器中引入less編譯器js文件和less文件，直接渲染編譯為css文應用到當前頁面中。
2.less文件通過編譯成為css之后引用css；
/ Less /
@color: #999;

@bgColor: skyblue;//不要添加引號

@width: 50%;

#wrap {
color: @color;
width: @width;
}
/ 生成后的 CSS /
#wrap {

color: #999;

width: 50%;
}

關于SASS和LESS的概念就是這樣，如果想要繼續深入了解更詳細語法，恐怕就得多花功夫了，不過，學好SASS和LESS對你的前端發展絕對是有很大幫助的。加油，努力成為前端大神。