一. Sass/Scss、Less、stylus是什么?

它們都是css預(yù)處理器。css預(yù)處理器的概念：CSS預(yù)處理器用一種專門的編程語言，進(jìn)行Web頁面樣式設(shè)計(jì)，然后再編譯成正常的CSS文件，以供項(xiàng)目使用。CSS預(yù)處理器為CSS增加一些編程的特性，無需考慮瀏覽器的兼容性問題。 比如說：Sass（SCSS）、LESS、Stylus、Turbine、Swithch CSS、CSS Cacheer、DT CSS等。都屬于css預(yù)處理器。

其中比較優(yōu)秀的： Sass、LESS，Stylus

Sass(Syntactically Awesome Stylesheets)：

注：Sass官網(wǎng)地址

Sass是一種動(dòng)態(tài)樣式語言，Sass語法屬于縮排語法，比css比多出好些功能(如變量、嵌套、運(yùn)算,混入(Mixin)、繼承、顏色處理，函數(shù)等)，更容易閱讀。

Sass與Scss是什么關(guān)系?

Sass的縮排語法，對于寫慣css前端的web開發(fā)者來說很不直觀，也不能將css代碼加入到Sass里面，因此sass語法進(jìn)行了改良，Sass 3就變成了Scss(sassy css)。與原來的語法兼容，只是用{}取代了原來的縮進(jìn)。

Less：

注： Less官方地址

Less也是一種動(dòng)態(tài)樣式語言. 受Sass影響較大,對CSS賦予了動(dòng)態(tài)語言的特性，如變量，繼承，運(yùn)算， 函數(shù). Less 既可以在客戶端上運(yùn)行 (支持IE 6+, Webkit, Firefox)，也可在服務(wù)端運(yùn)行 (借助 Node.js)。

Stylus：

注： Stylus官方地址

2010年產(chǎn)生于node社區(qū)， 主要用來給Node項(xiàng)目進(jìn)行CSS預(yù)處理支持，人氣不如前兩者

Stylus被稱為是一種革命性的新語言，提供一個(gè)高效、動(dòng)態(tài)、和使用表達(dá)方式來生成CSS，以供瀏覽器使用。Stylus同時(shí)支持縮進(jìn)和CSS常規(guī)樣式書寫規(guī)則。

需要安裝node

Stylus的語法花樣多一些，它的文件擴(kuò)展名是“.styl”，Stylus也接受標(biāo)準(zhǔn)的CSS語法，但是他也像Sass老的語法規(guī)則，使用縮進(jìn)控制，同時(shí)Stylus也接受不帶大括號(hào)（｛｝）和分號(hào)的語法

Stylus優(yōu)點(diǎn)：

• 更加健壯

• 寫法更接近于js

• 功能強(qiáng)大

Stylus缺點(diǎn)：

• 寫法需要一定時(shí)間適應(yīng)

• 學(xué)習(xí)曲線比較陡峭

二. Sass/Scss與Less、stylus區(qū)別

2.1 編譯環(huán)境不一樣

Sass的安裝需要Ruby環(huán)境，是在服務(wù)端處理的，而Less是需要引入less.js來處理Less代碼輸出css到瀏覽器，也可以在開發(fā)環(huán)節(jié)使用Less，然后編譯成css文件，直接放到項(xiàng)目中，也有 Less.app、SimpleLess、CodeKit.app這樣的工具，也有在線編譯地址。Stylus需要安裝node，然后安裝最新的stylus包即可使用

2.2 變量符不一樣

Less是@，而Scss是$， Stylus樣式中聲明變量沒有任何限定，你可以使用“$”符號(hào)開始。結(jié)尾的分號(hào)（;）可有可無，但變量名和變量值之間的等號(hào)（=）是需要的。有一點(diǎn)需要注意的是，如果我們使用“@”符號(hào)開頭來聲明變量，Stylus會(huì)進(jìn)行編譯，但其對應(yīng)的值并不會(huì)賦值給變量。換句話說，在Stylus中不要使用“@”符號(hào)開頭聲明變量。Stylus中調(diào)用變量的方法和LESS、Sass是完全相同的。

而且變量的作用域也是不一樣的

?

?

?

Less-作用域 @color: #00c; /* 藍(lán)色 */ #header { @color: #c00; /* red */border: 1px solid @color; /* 紅色邊框 */ } #footer {border: 1px solid @color; /* 藍(lán)色邊框 */ } Less-作用域編譯后 #header{border:1px solid #cc0000; } #footer{border:1px solid #0000cc; } scss-作用域 $color: #00c; /* 藍(lán)色 */ #header {$color: #c00; /* red */border: 1px solid $color; /* 紅色邊框 */ } #footer {border: 1px solid $color; /* 藍(lán)色邊框 */ } Sass-作用域編譯后 #header{border:1px solid #c00 } #footer{border:1px solid #c00 } / *stylus聲明變量*/ mainColor = #963; siteWidth = 1024px; $borderStyle = dotted; /*stylus調(diào)用變量*/ | /*轉(zhuǎn)譯出來的CSS*/ body {color mainColor | color: #963;border 1px $borderStyle mainColor | border:1px dotted #963max-width siteWidth | max-width:1024px;| }復(fù)制代碼

?

?

我們可以看出來，less和scss、stylus中的變量會(huì)隨著作用域的變化而不一樣。Sass的作用域最差，less和stylus一樣，都是向上查找，直到找到根部位置

?

2.3 輸出設(shè)置

Less沒有輸出設(shè)置，Sass提供4中輸出選項(xiàng)：nested, compact, compressed 和 expanded，stylus不知。

輸出樣式的風(fēng)格可以有四種選擇，默認(rèn)為nested

• nested：嵌套縮進(jìn)的css代碼

• expanded：展開的多行css代碼

• compact：簡潔格式的css代碼

• compressed：壓縮后的css代碼

2.4. 處理?xiàng)l件語句

Sass支持條件語句，可以使用if{}else{},for{}循環(huán)等等。 LESS的條件語句使用有些另類，他不是我們常見的關(guān)鍵詞if和else if之類，而其實(shí)現(xiàn)方式是利用關(guān)鍵詞“when”。stylus的條件語句的使用和其他編程的條件語句使用基本類似，不同的是他可以在樣式去省略大括號(hào)（｛｝）：

?

?

?

/* Sample Sass “if” statement */ @if lightness($color) > 30% {} @else {} /* Sample Sass “for” loop */ @for $i from 1 to 10 {.border-#{$i} {border: #{$i}px solid blue;} } stylus中： box(x, y, margin = false)padding y xif marginmargin y xbodybox(5px, 10px, true) Stylus同樣可以和else if、else配套使用： box(x, y, margin-only = false)if margin-onlymargin y xelsepadding y x復(fù)制代碼

?

sass中使用條件：

?

?

?

.mixin (@a) when (@a >= 10) {background-color: black; } .mixin (@a) when (@a < 10) {background-color: white; } .class1 { .mixin(12) } .class2 { .mixin(6) } 復(fù)制代碼

?

?

轉(zhuǎn)譯后：

?

?

?

.class1 {background-color: black; } .class2 {background-color: white; }復(fù)制代碼

?

2.5? 引用外部CSS文件

scss引用的外部文件命名必須以_開頭, 如下例所示:其中_test1.scss、_test2.scss、_test3.scss文件分別設(shè)置的h1 h2 h3。文件名如果以下劃線_開頭的話，Sass會(huì)認(rèn)為該文件是一個(gè)引用文件，不會(huì)將其編譯為css文件.

?

?

?

?

// 源代碼： @import "_test1.scss"; @import "_test2.scss"; @import "_test3.scss"; // 編譯后： h1 {font-size: 17px; } h2 {font-size: 17px; } h3 {font-size: 17px; }復(fù)制代碼

?

Less引用外部文件和css中的@import沒什么差異。

Stylus同樣可以用@import，也支持其他文件通過@import進(jìn)行引入

2.6 Sass和Less的工具庫不同

Sass有工具庫Compass, 簡單說，Sass和Compass的關(guān)系有點(diǎn)像Javascript和jQuery的關(guān)系,Compass是Sass的工具庫。在它的基礎(chǔ)上，封裝了一系列有用的模塊和模板，補(bǔ)充強(qiáng)化了Sass的功能。

Less有UI組件庫Bootstrap,Bootstrap是web前端開發(fā)中一個(gè)比較有名的前端UI組件庫，Bootstrap的樣式文件部分源碼就是采用Less語法編寫。

Archer一個(gè)的英文面向移動(dòng)端的的，基于stylus的樣式工具庫。

Archer于起源est項(xiàng)目，于專注純移動(dòng)端的瀏覽器的樣式展示。如有本地桌面端的需求，請使用est。

三. 總結(jié)

不管是Sass，還是Less或者stylus，都可以視為一種基于CSS之上的高級語言，其目的是使得CSS開發(fā)更靈活和更強(qiáng)大，Sass、stylus的功能比Less強(qiáng)大,基本可以說是一種真正的編程語言了，Less則相對清晰明了,易于上手,對編譯環(huán)境要求比較寬松。考慮到編譯Sass要安裝Ruby,而Ruby官網(wǎng)在國內(nèi)訪問不了,個(gè)人在實(shí)際開發(fā)中更傾向于選擇Less。

?

四、PostCSS

官網(wǎng)地址

• PostCSS介紹：

A tool for transforming CSS with JavaScript

PostCSS 是目前流行的一個(gè)對 CSS 進(jìn)行處理的工具（平臺(tái)）。PostCSS 依托其強(qiáng)大的插件體系為 CSS 處理增加了無窮的可能性。

PostCSS 本身是一個(gè)功能比較單一的工具。它提供了一種方式用 JavaScript 代碼來處理 CSS。它負(fù)責(zé)把 CSS 代碼解析成抽象語法樹結(jié)構(gòu)（Abstract Syntax Tree，AST），再交由插件來進(jìn)行處理。插件基于 CSS 代碼的 AST 所能進(jìn)行的操作是多種多樣的，比如可以支持變量和混入（mixin），增加瀏覽器相關(guān)的聲明前綴，或是把使用將來的 CSS 規(guī)范的樣式規(guī)則轉(zhuǎn)譯（transpile）成當(dāng)前的 CSS 規(guī)范支持的格式。從這個(gè)角度來說，PostCSS 的強(qiáng)大之處在于其不斷發(fā)展的插件體系。目前 PostCSS 已經(jīng)有 200 多個(gè)功能各異的插件。開發(fā)人員也可以根據(jù)項(xiàng)目的需要，開發(fā)出自己的 PostCSS 插件。

PostCSS 從其誕生之時(shí)就帶來了社區(qū)對其類別劃分的爭議。這主要是由于其名稱中的 post，很容易讓人聯(lián)想到 PostCSS 是用來做 CSS 后處理（post-processor）的，從而與已有的 CSS 預(yù)處理（pre-processor）語言，如 SASS 和 LESS 等進(jìn)行類比。實(shí)際上，PostCSS 的主要功能只有兩個(gè)：第一個(gè)就是前面提到的把 CSS 解析成 JavaScript 可以操作的 AST，第二個(gè)就是調(diào)用插件來處理 AST 并得到結(jié)果。因此，不能簡單的把 PostCSS 歸類成 CSS 預(yù)處理或后處理工具。PostCSS 所能執(zhí)行的任務(wù)非常多，同時(shí)涵蓋了傳統(tǒng)意義上的預(yù)處理和后處理。PostCSS 是一個(gè)全新的工具，給前端開發(fā)人員帶來了不一樣的處理 CSS 的方式。

• PostCSS使用

PostCSS 一般不單獨(dú)使用，而是與已有的構(gòu)建工具進(jìn)行集成。PostCSS 與主流的構(gòu)建工具，如 Webpack、Grunt 和 Gulp 都可以進(jìn)行集成。完成集成之后，選擇滿足功能需求的 PostCSS 插件并進(jìn)行配置。現(xiàn)在經(jīng)常用到的是基于PostCSS的Autoprefixer插件，使用方式可以在官網(wǎng)的插件庫進(jìn)行查詢。下面是官方插件庫地址：

PostCSS插件庫地址

• PostCSS的優(yōu)點(diǎn)

?

1.擴(kuò)展性強(qiáng) 2.兼容性強(qiáng) 3.功能全面 4.有很多插件庫供選擇

?

• PostCSS的缺點(diǎn)

1.配置繁瑣 2.學(xué)習(xí)相對陡峭

總結(jié)

以上是生活随笔為你收集整理的关于sass（scss）、less、postcss、stylus等的用法与区别的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。