關於sass、scss、less的概念性知識彙總

這篇文章主要解答如下幾個問題，供前端開發者的新手參考。

一、什麼是Sass和Less？

二、爲何要使用CSS預處理器？

三、Sass和Less的比較

四、爲何選擇使用Sass而不是Less？

什麼是Sass和Less？

  Sass和Less都屬於CSS預處理器，那什麼是 CSS 預處理器呢？

  CSS 預處理器定義了一種新的語言，其基本思想是，用一種專門的編程語言，爲 CSS 增長了一些編程的特性，將 CSS 做爲目標生成文件，而後開發者就只要使用這種語言進行CSS的編碼工做。

  轉化成通俗易懂的話來講就是「用一種專門的編程語言，進行 Web 頁面樣式設計，再經過編譯器轉化爲正常的 CSS 文件，以供項目使用」。

爲何要使用CSS預處理器？

  做爲前端開發人員，你們都知道，Js中能夠自定義變量，而CSS僅僅是一個標記語言，不是編程語言，所以不能夠自定義變量，不能夠引用等等。

CSS有具體如下幾個缺點：

  語法不夠強大，好比沒法嵌套書寫，致使模塊化開發中須要書寫不少重複的選擇器；

  沒有變量和合理的樣式複用機制，使得邏輯上相關的屬性值必須以字面量的形式重複輸出，致使難以維護。

  這就致使了咱們在工做中無故增長了許多工做量。而使用CSS預處理器，提供 CSS 缺失的樣式層複用機制、減小冗餘代碼，提升樣式代碼的可維護性。大大提升了咱們的開發效率。

  可是，CSS預處理器也不是萬金油，CSS的好處在於簡便、隨時隨地被使用和調試。預編譯CSS步驟的加入，讓咱們開發工做流中多了一個環節，調試也變得更麻煩了。更大的問題在於，預編譯很容易形成後代選擇器的濫用。

  因此咱們在實際項目中衡量預編譯方案時，仍是得想一想，比起帶來的額外維護開銷，CSS預處理器有沒有解決更大的麻煩。

Sass和Less的比較

不一樣之處

• 一、Less環境較Sass簡單

Cass的安裝須要安裝Ruby環境，Less基於JavaScript，是須要引入Less.js來處理代碼輸出css到瀏覽器，也能夠在開發環節使用Less，而後編譯成css文件，直接放在項目中，有less.app、SimpleLess、CodeKit.app這樣的工具，也有在線編輯地址。

• 二、Less使用較Sass簡單

LESS 並無裁剪 CSS 原有的特性，而是在現有 CSS 語法的基礎上，爲 CSS 加入程序式語言的特性。只要你瞭解 CSS 基礎就能夠很容易上手。

• 三、從功能出發，Sass較Less略強大一些

①sass有變量和做用域。

• $variable，like php；
• #｛$variable｝like ruby；
• 變量有全局和局部之分，而且有優先級。

②sass有函數的概念

• @function和@return以及函數參數（還有不定參）可讓你像js開發那樣封裝你想要的邏輯。
• @mixin相似function但缺乏像function的編程邏輯，更多的是提升css代碼段的複用性和模塊化，這個用的人也是最多的。
• ruby提供了很是豐富的內置原生api。

③進程控制：

• 條件：@if @else；
• 循環遍歷：@for @each @while
• 繼承：@extend
• 引用：@import

④數據結構：

• $list類型=數組；
• $map類型=object；

其他的也有string、number、function等類型

• 四、Less與Sass處理機制不同

  前者是經過客戶端處理的，後者是經過服務端處理，相比較之下前者解析會比後者慢一點

• 五、關於變量在Less和Sass中的惟一區別就是Less用@，Sass用$。

 

相同之處

Less和Sass在語法上有些共性，好比下面這些：

一、混入(Mixins)——class中的class；
二、參數混入——能夠傳遞參數的class，就像函數同樣；
三、嵌套規則——Class中嵌套class，從而減小重複的代碼；
四、運算——CSS中用上數學；
五、顏色功能——能夠編輯顏色；
六、名字空間(namespace)——分組樣式，從而能夠被調用；
七、做用域——局部修改樣式；
八、JavaScript 賦值——在CSS中使用JavaScript表達式賦值。

爲何選擇使用Sass而不是Less？

一、Sass在市面上有一些成熟的框架，好比說Compass，並且有不少框架也在使用Sass，好比說Foundation。二、就國外討論的熱度來講，Sass絕對優於LESS。三、就學習教程來講，Sass的教程要優於LESS。在國內LESS集中的教程是LESS中文官網，而Sass的中文教程，慢慢在國內也較爲廣泛。四、Sass也是成熟的CSS預處理器之一，並且有一個穩定，強大的團隊在維護。五、同時還有Scss對sass語法進行了改良，Sass 3就變成了Scss(sassy css)。與原來的語法兼容，只是用{}取代了原來的縮進。六、bootstrap（Web框架）最新推出的版本4，使用的就是Sass。