本篇文章給大家介紹一下三種css預(yù)處理器的，以及比較一下，了解他們之間的差異。有一定的參考價(jià)值，有需要的朋友可以參考一下，希望對(duì)大家有所幫助。

一、介紹

CSS預(yù)處理器定義了一種新的語言，基本的思想是用一種專門的編程語言，開發(fā)者只需要使用這種語言進(jìn)行編碼工作，減少枯燥無味的CSS代碼的編寫過程的同時(shí)，它能讓你的CSS具備更加簡(jiǎn)潔、適應(yīng)性更強(qiáng)、可讀性更加、層級(jí)關(guān)系更加明顯、更易于代碼的維護(hù)等諸多好處。

css預(yù)處理器種類繁多，三種主流css預(yù)處理器是Less、Sass（Scss）及Stylus；它們各自的背景如下:

Sass：2007年誕生，最早也是最成熟的CSS預(yù)處理器，擁有ruby社區(qū)的支持和compass這一最強(qiáng)大的css框架。

目前受LESS影響，已經(jīng)進(jìn)化到了全面兼容CSS的SCSS（SCSS 需要使用分號(hào)和花括號(hào)而不是換行和縮進(jìn)）。

Less：2009年出現(xiàn)，受SASS的影響較大，但又使用CSS的語法，讓大部分開發(fā)者和設(shè)計(jì)師更容易上手，在ruby社區(qū)之外支持者遠(yuǎn)超過SASS。

其缺點(diǎn)是比起SASS來，可編程功能不夠。

不過優(yōu)點(diǎn)是簡(jiǎn)單和兼容CSS，反過來也影響了SASS演變到了SCSS的時(shí)代，著名的Twitter Bootstrap就是采用LESS做底層語言的。

Stylus：2010年產(chǎn)生，來自Node.js社區(qū)。

主要用來給Node項(xiàng)目進(jìn)行CSS預(yù)處理支持，在此社區(qū)之內(nèi)有一定支持者，在廣泛的意義上人氣還完全不如SASS和LESS。

二、比較

在使用 CSS 預(yù)處理器之前最重要的是理解語法，幸運(yùn)的是基本上大多數(shù)預(yù)處理器的語法跟 CSS 都差不多。

首先 Sass 和 Less 都使用的是標(biāo)準(zhǔn)的 CSS 語法，因此如果可以很方便的將已有的 CSS 代碼轉(zhuǎn)為預(yù)處理器代碼，默認(rèn) Sass 使用 .sass 擴(kuò)展名，而 Less 使用 .less 擴(kuò)展名。

h1 {   color: #0982C1; }

這是一個(gè)再普通不過的，不過 Sass 同時(shí)也支持老的語法，就是不包含花括號(hào)和分號(hào)的方式：

h1   color: #0982c1

而 Stylus 支持的語法要