您好,登錄后才能下訂單哦!
這篇文章主要介紹了css中的預(yù)處理器有哪些,具有一定借鑒價(jià)值,需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。
一、介紹
CSS預(yù)處理器定義了一種新的語言,基本的思想是用一種專門的編程語言,開發(fā)者只需要使用這種語言進(jìn)行編碼工作,減少枯燥無味的CSS代碼的編寫過程的同時,它能讓你的CSS具備更加簡潔、適應(yīng)性更強(qiáng)、可讀性更加、層級關(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 需要使用分號和花括號而不是換行和縮進(jìn))。
Less:2009年出現(xiàn),受SASS的影響較大,但又使用CSS的語法,讓大部分開發(fā)者和設(shè)計(jì)師更容易上手,在ruby社區(qū)之外支持者遠(yuǎn)超過SASS。
其缺點(diǎn)是比起SASS來,可編程功能不夠。
不過優(yōu)點(diǎn)是簡單和兼容CSS,反過來也影響了SASS演變到了SCSS的時代,著名的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ò)展名。
h2 { color: #0982C1; }
這是一個再普通不過的,不過 Sass 同時也支持老的語法,就是不包含花括號和分號的方式:
h2 color: #0982c1
而 Stylus 支持的語法要更多樣性一點(diǎn),它默認(rèn)使用 .styl 的文件擴(kuò)展名,下面是 Stylus 支持的語法:
/* style.styl */ h2 { color: #0982C1; } /* omit brackets */ h2 color: #0982C1; /* omit colons and semi-colons */ h2 color #0982C1
可以在同一個樣式單中使用不同的變量,例如下面的寫法也不會報(bào)錯:
h2 { color #0982c1 } h3 font-size: 1.2em
感謝你能夠認(rèn)真閱讀完這篇文章,希望小編分享css中的預(yù)處理器有哪些內(nèi)容對大家有幫助,同時也希望大家多多支持億速云,關(guān)注億速云行業(yè)資訊頻道,遇到問題就找億速云,詳細(xì)的解決方法等著你來學(xué)習(xí)!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。