這篇文章主要解答以下幾個問題，供前端開發(fā)者的新手參考敛瓷。
1叁巨、什么是Sass和Less？
2呐籽、為什么要使用CSS預處理器锋勺？
3、Sass和Less的比較
4狡蝶、為什么選擇使用Sass而不是Less庶橱？
什么是Sass和Less？
??Sass和Less都屬于CSS預處理器贪惹，那什么是 CSS 預處理器呢苏章？
??CSS 預處理器定義了一種新的語言，其基本思想是，用一種專門的編程語言枫绅，為 CSS 增加了一些編程的特性泉孩，將 CSS 作為目標生成文件，然后開發(fā)者就只要使用這種語言進行CSS的編碼工作并淋。
??轉(zhuǎn)化成通俗易懂的話來說就是“用一種專門的編程語言棵譬，進行 Web 頁面樣式設(shè)計，再通過編譯器轉(zhuǎn)化為正常的 CSS 文件预伺，以供項目使用”订咸。
為什么要使用CSS預處理器？
??作為前端開發(fā)人員酬诀，大家都知道脏嚷，Js中可以自定義變量，而CSS僅僅是一個標記語言瞒御，不是編程語言父叙，因此不可以自定義變量，不可以引用等等肴裙。
CSS有具體以下幾個缺點：
??語法不夠強大趾唱，比如無法嵌套書寫，導致模塊化開發(fā)中需要書寫很多重復的選擇器蜻懦；
??沒有變量和合理的樣式復用機制甜癞，使得邏輯上相關(guān)的屬性值必須以字面量的形式重復輸出，導致難以維護宛乃。
??這就導致了我們在工作中無端增加了許多工作量悠咱。而使用CSS預處理器，提供 CSS 缺失的樣式層復用機制征炼、減少冗余代碼析既，提高樣式代碼的可維護性。大大提高了我們的開發(fā)效率谆奥。
??但是眼坏，CSS預處理器也不是萬金油，CSS的好處在于簡便酸些、隨時隨地被使用和調(diào)試宰译。預編譯CSS步驟的加入，讓我們開發(fā)工作流中多了一個環(huán)節(jié)擂仍，調(diào)試也變得更麻煩了囤屹。更大的問題在于，預編譯很容易造成后代選擇器的濫用逢渔。
??所以我們在實際項目中衡量預編譯方案時肋坚，還是得想想，比起帶來的額外維護開銷，CSS預處理器有沒有解決更大的麻煩智厌。
Sass和Less的比較
不同之處
1诲泌、Less環(huán)境較Sass簡單
Cass的安裝需要安裝Ruby環(huán)境，Less基于JavaScript铣鹏，是需要引入Less.js來處理代碼輸出css到瀏覽器敷扫，也可以在開發(fā)環(huán)節(jié)使用Less，然后編譯成css文件诚卸，直接放在項目中葵第，有l(wèi)ess.app、SimpleLess合溺、CodeKit.app這樣的工具卒密，也有在線編輯地址。2棠赛、Less使用較Sass簡單
LESS 并沒有裁剪 CSS 原有的特性哮奇，而是在現(xiàn)有 CSS 語法的基礎(chǔ)上，為 CSS 加入程序式語言的特性睛约。只要你了解 CSS 基礎(chǔ)就可以很容易上手鼎俘。-
3、從功能出發(fā)辩涝，Sass較Less略強大一些
①sass有變量和作用域贸伐。- $variable，like php膀值；
- #｛$variable｝like ruby棍丐；
- 變量有全局和局部之分，并且有優(yōu)先級沧踏。
②sass有函數(shù)的概念
- @function和@return以及函數(shù)參數(shù)（還有不定參）可以讓你像js開發(fā)那樣封裝你想要的邏輯。
- @mixin類似function但缺少像function的編程邏輯巾钉，更多的是提高css代碼段的復用性和模塊化翘狱，這個用的人也是最多的。
- ruby提供了非常豐富的內(nèi)置原生api砰苍。
③進程控制：
- 條件：@if @else潦匈；
- 循環(huán)遍歷：@for @each @while
- 繼承：@extend
- 引用：@import
④數(shù)據(jù)結(jié)構(gòu)：
$list類型=數(shù)組；
$map類型=object赚导；
其余的也有string茬缩、number、function等類型4吼旧、Less與Sass處理機制不一樣
??前者是通過客戶端處理的凰锡，后者是通過服務(wù)端處理，相比較之下前者解析會比后者慢一點5、關(guān)于變量在Less和Sass中的唯一區(qū)別就是Less用@掂为，Sass用$裕膀。
?
相同之處
Less和Sass在語法上有些共性，比如下面這些：
1勇哗、混入(Mixins)——class中的class昼扛；
2、參數(shù)混入——可以傳遞參數(shù)的class欲诺，就像函數(shù)一樣抄谐；
3、嵌套規(guī)則——Class中嵌套class扰法，從而減少重復的代碼斯稳；
4、運算——CSS中用上數(shù)學迹恐；
5挣惰、顏色功能——可以編輯顏色；
6殴边、名字空間(namespace)——分組樣式憎茂，從而可以被調(diào)用；
7锤岸、作用域——局部修改樣式竖幔；
8、JavaScript 賦值——在CSS中使用JavaScript表達式賦值是偷。
為什么選擇使用Sass而不是Less拳氢？
1、Sass在市面上有一些成熟的框架蛋铆，比如說Compass馋评，而且有很多框架也在使用Sass，比如說Foundation刺啦。
2留特、就國外討論的熱度來說，Sass絕對優(yōu)于LESS玛瘸。
3蜕青、就學習教程來說，Sass的教程要優(yōu)于LESS糊渊。在國內(nèi)LESS集中的教程是LESS中文官網(wǎng)右核，而Sass的中文教程，慢慢在國內(nèi)也較為普遍渺绒。
4贺喝、Sass也是成熟的CSS預處理器之一菱鸥，而且有一個穩(wěn)定，強大的團隊在維護搜变。
5采缚、同時還有Scss對sass語法進行了改良，Sass 3就變成了Scss(sassy css)挠他。與原來的語法兼容扳抽，只是用{}取代了原來的縮進。
6殖侵、bootstrap（Web框架）最新推出的版本4贸呢，使用的就是Sass。
