css中的預(yù)處理器有哪些

這篇文章主要介紹了css中的預(yù)處理器有哪些，具有一定借鑒價(jià)值，需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。

公司主營(yíng)業(yè)務(wù)：成都網(wǎng)站建設(shè)、網(wǎng)站建設(shè)、移動(dòng)網(wǎng)站開發(fā)等業(yè)務(wù)。幫助企業(yè)客戶真正實(shí)現(xiàn)互聯(lián)網(wǎng)宣傳，提高企業(yè)的競(jìng)爭(zhēng)能力。創(chuàng)新互聯(lián)建站是一支青春激揚(yáng)、勤奮敬業(yè)、活力青春激揚(yáng)、勤奮敬業(yè)、活力澎湃、和諧高效的團(tuán)隊(duì)。公司秉承以“開放、自由、嚴(yán)謹(jǐn)、自律”為核心的企業(yè)文化，感謝他們對(duì)我們的高要求，感謝他們從不同領(lǐng)域給我們帶來(lái)的挑戰(zhàn)，讓我們激情的團(tuán)隊(duì)有機(jī)會(huì)用頭腦與智慧不斷的給客戶帶來(lái)驚喜。創(chuàng)新互聯(lián)建站推出長(zhǎng)壽免費(fèi)做網(wǎng)站回饋大家。

一、介紹

CSS預(yù)處理器定義了一種新的語(yǔ)言，基本的思想是用一種專門的編程語(yǔ)言，開發(fā)者只需要使用這種語(yǔ)言進(jìn)行編碼工作，減少枯燥無(wú)味的CSS代碼的編寫過(guò)程的同時(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的語(yǔ)法，讓大部分開發(fā)者和設(shè)計(jì)師更容易上手，在ruby社區(qū)之外支持者遠(yuǎn)超過(guò)SASS。

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

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

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

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

二、比較

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

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

h2 {
  color: #0982C1;
}

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

h2
  color: #0982c1

而 Stylus 支持的語(yǔ)法要更多樣性一點(diǎn)，它默認(rèn)使用 .styl 的文件擴(kuò)展名，下面是 Stylus 支持的語(yǔ)法：

/* style.styl */
h2 {
  color: #0982C1;
}
 
/* omit brackets */
h2
  color: #0982C1;
 
/* omit colons and semi-colons */
h2
  color #0982C1

可以在同一個(gè)樣式單中使用不同的變量，例如下面的寫法也不會(huì)報(bào)錯(cuò)：

h2 {
  color #0982c1
}
h3
  font-size: 1.2em

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享css中的預(yù)處理器有哪些內(nèi)容對(duì)大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，遇到問(wèn)題就找創(chuàng)新互聯(lián)，詳細(xì)的解決方法等著你來(lái)學(xué)習(xí)!

網(wǎng)頁(yè)題目：css中的預(yù)處理器有哪些
路徑分享：http://muchs.cn/article30/ipposo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站排名、品牌網(wǎng)站制作、自適應(yīng)網(wǎng)站、云服務(wù)器、ChatGPT、域名注冊(cè)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容