一、什麼是css預處器
css預處理器定義了一種新的語言，其基本思想是，用一種專門的程式語言，為css增加了一些程式設計的特性，將css作為目標生成檔案，然後開發者就只要使用這種語言進行編碼工作。通俗的說，css預處理器用一種專門的程式語言，進行web頁面樣式設計，然後再編譯成正常的css檔案，以供專案使用。css預處理器為css增加一些程式設計的特性，無需考慮瀏覽器的相容性問題，例如你可以在css中使用變數、簡單的邏輯程式、函式等等在程式語言中的一些基本特性，可以讓你的css更加簡潔、適應性更強、可讀性更佳，更易於**的維護等諸多好處。
二、sass、less和stylus背景介紹
為了能更好的了解這三款流行的css預處理器，我們先從其背景入手，簡單的了解一下各自的背景資訊。
1.sass背景介紹
sass是對css（層疊樣式表）的語法的一種擴充，誕生於2023年，最早也是最成熟的一款css預處理器語言，它可以使用變數、常量、巢狀、混入、函式等功能，可以更有效有彈性的寫出css。sass最後還是會編譯出合法的css讓瀏覽器使用，也就是說它本身的語法並不太容易讓瀏覽器識別，因為它不是標準的css格式，在它的語法內部可以使用動態變數等，所以它更像一種極簡單的動態語言。
其實現在的sass已經有了兩套語法規則：乙個依舊是用縮排作為分隔符來區分**塊的；另一套規則和css一樣採用了大括號（｛｝）作為分隔符。後一種語法規則又名scss，在sass3之後的版本都支援這種語法規則。
2.less的背景介紹
2023年開源的乙個專案，受sass的影響較大，但又使用css的語法，讓大部分開發者和設計師更容易上手。less提供了多種方式能平滑的將寫好的**轉化成標準的css**，在很多流行的框架和工具中已經能經常看到less的身影了（例如twitter的bootstrap框架就使用了less）。
根據維基百科上的介紹，其實less是alexis sellier受sass的影響建立的乙個開源專案。當時sass採用了縮排作為分隔符來區分**塊，而不是css中廣為使用的大括號（｛｝）。為了讓css現有的使用者使用起來更佳方便，alexis開發了less並提供了類似css的書寫功能。
注：less的官網：
3.stylus背景介紹
stylus，2023年產生，來自於node.js社群，主要用來給node專案進行css預處理支援，在此社群之內有一定支持者，在廣泛的意義上人氣還完全不如sass和less。
stylus被稱為是一種革命性的新語言，提供乙個高效、動態、和使用表達方式來生成css，以供瀏覽器使用。stylus同時支援縮排和css常規樣式書寫規則。
注：stylus官網：
綜上所述，我們對sass、less和stylus做乙個簡單的對比總結：
上面是css預處理器語言中的sass、less和stylus在某些方面的對比，相對於css來說，上面都是css預處理器語言的優點？那麼他有沒有缺點呢？
萬物都有陰陽兩極，有圓就有缺，css預處理器語言也逃避不了這個宿命。個人感覺css預處理器語言那是程式設計師的玩具，想通過程式設計的方式跨界解決css的問題。可以css應該面臨的問題乙個也少不了，只是增加了乙個編譯過程而已，簡單來說css預處理器語言較css玩法變得更高階了，但同時降低了自己對最終**的控制力。更致命的是提高了門檻，首先是上手門檻，其次是維護門檻，再來是團隊整體水平和規範的門檻。這也造成了初學學習成本的昂貴。
css預處理器
css預處理定義了一種新的語言，其思想是一種專門的程式語言，為css增加了一些程式設計的特性。將css作為目標生成檔案。開發者可以使用這種語言進行編碼工作。css預處理器是一種專門的程式語言，進行web頁面樣式設計，然後再編譯成正常的css檔案，以供專案使用。css預處理器為css增加了一些程式設計...
CSS預處理器
什麼是css預處器？css 預處理器用一種專門的程式語言，進行 web 頁面樣式設計，然後再編譯成正常的 css 檔案，以供專案使用。css 預處理器為 css 增加一些程式設計的特性，無需考慮瀏覽器的相容性問題 sass sass 是採用 ruby 語言編寫的一款 css 預處理語言，它誕生於20...
css預處理器
sass less是什麼？大家為什麼要使用他們？他們是css預處理器。他是css上的一種抽象層。他們是一種特殊的語法 語言編譯成css。less是一種動態樣式語言.將css賦予了動態語言的特性，如變數，繼承，運算，函式.less 既可以在客戶端上執行 支援ie 6 webkit,firefox 也可...