Hello，大家好，我是 Sunday。

隨著前端工程化的不斷提升，CSS預(yù)處理器已經(jīng)成為了項(xiàng)目中不可或缺的一部分，很多人在項(xiàng)目技術(shù)選型時(shí)都會(huì)選擇一款CSS預(yù)處理器，大部分前端腳手架也包含了一系列CSS預(yù)處理的模板，大家已經(jīng)習(xí)慣了CSS預(yù)處理器帶來的靈活、流暢的代碼編寫體驗(yàn)，而原生的CSS則被忽視了。

很多前端開發(fā)者可能還認(rèn)為 CSS 預(yù)處理器是一個(gè)比較新的技術(shù)，但事實(shí)上并非如此。最早的 CSS 預(yù)處理器 Sass 誕生于 2007 年，也就是說它已經(jīng)存在了 17 年。而相對(duì)較新的 Stylus 也已經(jīng)發(fā)布了 14 年。

前端技術(shù)棧的發(fā)展日新月異，W3C 的 CSS 工作組也不斷從社區(qū)中汲取靈感，加速 CSS 的迭代。那么，CSS 是否能夠取代 CSS 預(yù)處理器的地位？CSS 預(yù)處理器是否會(huì)成為 CSS 過渡期的產(chǎn)物？

W3C 簡(jiǎn)介

CSS 是開放網(wǎng)絡(luò)的核心語(yǔ)言之一，由W3C制定，用于跨瀏覽器實(shí)現(xiàn)。因此，在深入了解 CSS 規(guī)范更新的進(jìn)展之前，有必要先了解 W3C 及其標(biāo)準(zhǔn)化進(jìn)程。

W3C，又稱萬維網(wǎng)聯(lián)盟或 W3C 理事會(huì)，是萬維網(wǎng)的主要國(guó)際標(biāo)準(zhǔn)組織。它是一個(gè)半自治的非政府組織，由蒂姆·伯納斯-李于 1994 年 10 月在麻省理工學(xué)院計(jì)算機(jī)科學(xué)和人工智能實(shí)驗(yàn)室 (MIT/LCS) 創(chuàng)立。

W3C 制定了一系列標(biāo)準(zhǔn)，并鼓勵(lì)網(wǎng)絡(luò)應(yīng)用程序開發(fā)者和內(nèi)容提供商遵守這些標(biāo)準(zhǔn)。這些標(biāo)準(zhǔn)涵蓋了所用語(yǔ)言的規(guī)范、開發(fā)指南和解釋引擎的行為。W3C 制定了許多有影響力的標(biāo)準(zhǔn)規(guī)范，包括HTML、DOM、SVG、XML和CSS

W3C 規(guī)范制定流程

由于我們需要在不同的階段討論CSS規(guī)范，因此有必要簡(jiǎn)單介紹一下W3C的規(guī)范發(fā)展過程。

根據(jù)W3C 的流程文檔，推薦標(biāo)準(zhǔn)的制定要經(jīng)歷多個(gè)階段。

主要階段如下：

• WD：工作草案
• CR：候選人推薦
• PR：提議的建議
• REC：W3C 建議

由于篇幅有限，我們?cè)谶@里就不詳細(xì)介紹W3C的標(biāo)準(zhǔn)流程了，如果想詳細(xì)了解W3C的標(biāo)準(zhǔn)流程和組織架構(gòu)，可以參考W3C的標(biāo)準(zhǔn)流程和組織架構(gòu)。

CSS 的歷史

HTML 和 CSS 緊密相關(guān)，以至于您我們能認(rèn)為它們是同時(shí)出現(xiàn)的。

但是事實(shí)上，直到 1989 年 Tim Berners-Lee 發(fā)明互聯(lián)網(wǎng)多年后，世界上才有了 CSS（更不用說 CSS 預(yù)處理器了）。最初的網(wǎng)絡(luò)版本并沒有提供設(shè)置網(wǎng)頁(yè)樣式的方法。

雖然 HTML 規(guī)范定義了網(wǎng)頁(yè)中標(biāo)題和段落的標(biāo)簽，但它并未規(guī)定這些內(nèi)容在瀏覽器中的呈現(xiàn)方式，例如：大小、位置、間距、縮進(jìn)和其他屬性。

CSS1

1994 年，H?kon Wium Lie和Bert Bos合作設(shè)計(jì)了 CSS。他們?cè)?1994 年芝加哥的一次會(huì)議上首次提出了 CSS 提案。

CSS1 的要求于 1996 年 12 月發(fā)布，主要定義了：選擇器、樣式屬性、偽類和對(duì)象。

CSS2

CSS2 由 W3C 于 1998 年 5 月發(fā)布，基于 CSS1 設(shè)計(jì)，并擴(kuò)展和改進(jìn)了許多更強(qiáng)大的屬性，包括：選擇器、定位模型、布局、表格樣式、媒體類型、偽類和光標(biāo)樣式等。

層疊樣式表第 2 級(jí)修訂版 1（通常稱為“CSS 2.1”）修復(fù)了 CSS2 中的錯(cuò)誤，刪除了支持不佳或不兼容的功能，并添加了已實(shí)現(xiàn)的瀏覽器擴(kuò)展。為了遵守 W3C 技術(shù)規(guī)范的標(biāo)準(zhǔn)化流程，CSS 2.1 多年來一直在工作草案 (WD) 狀態(tài)和候選推薦 (CP) 狀態(tài)之間徘徊。

CSS 2.1 于 2004 年 2 月 25 日成為候選推薦標(biāo)準(zhǔn) (CR)，但于 2005 年 6 月 13 日返回工作草案 (WD) 進(jìn)行進(jìn)一步審查。隨后于 2007 年 7 月 19 日返回候選推薦標(biāo)準(zhǔn) (CP)，并于 2009 年進(jìn)行了兩次更新。然而，由于修改和澄清，它于 2010 年 12 月 7 日再次返回最后工作草案。

CSS3

CSS3是層疊樣式表語(yǔ)言的最新版本，旨在擴(kuò)展CSS2.1。

CSS Level 2 從 2002 年 8 月到 2011 年 6 月花了九年時(shí)間才達(dá)到推薦狀態(tài)，這主要是因?yàn)橐恍┬√匦詼?。為了加快那些已?jīng)確認(rèn)沒有問題的特性的標(biāo)準(zhǔn)化進(jìn)程， W3C 的CSS 工作組做出了一個(gè)叫做“北京主義（Beijing doctrine https://fantasai.inkedblade.net/weblog/2011/inside-csswg/modules）”的決定，將 CSS 分成許多稱為模塊的小組件。

這些模塊彼此獨(dú)立，并根據(jù)其進(jìn)度進(jìn)行標(biāo)準(zhǔn)化。其中一些已經(jīng)達(dá)到 W3C 推薦狀態(tài)，而其他一些仍處于早期工作草案階段。當(dāng)新的需求得到確認(rèn)時(shí)，也會(huì)以同樣的方式添加新的模塊。

從形式上看，CSS3 標(biāo)準(zhǔn)本身已不復(fù)存在。每個(gè)模塊都是獨(dú)立標(biāo)準(zhǔn)化的，當(dāng)前的標(biāo)準(zhǔn) CSS 包括修訂后的 CSS2.1 和擴(kuò)展它的完整模塊，每個(gè)模塊的級(jí)別各不相同?？梢栽诿總€(gè)時(shí)間點(diǎn)為 CSS 標(biāo)準(zhǔn)定義快照，列出 CSS 2.1 和成熟模塊。

W3C 定期發(fā)布這些快照，例如2007、2010、2015或2017。

到目前為止，第 3 級(jí)以上的模塊尚未實(shí)現(xiàn)標(biāo)準(zhǔn)化，但未來可能會(huì)有所改變。不過，有些模塊（如選擇器 4 或 CSS 邊框和背景第 4 級(jí)）雖然尚未達(dá)到“首次發(fā)布工作草案”的狀態(tài)，但已經(jīng)有了編輯草案。

有一張圖可以更直觀的表示當(dāng)前CSS3 Modules的分類和現(xiàn)狀：

CSS 預(yù)處理器

CSS 自誕生以來，基本語(yǔ)法和核心機(jī)制并沒有發(fā)生過根本性的變化，長(zhǎng)期以來其開發(fā)主要集中在提升表達(dá)能力上。

最初，CSS 只是起到網(wǎng)頁(yè)裝飾的輔助作用，輕量、易學(xué)是首要訴求，但如今網(wǎng)站已經(jīng)變得異常復(fù)雜，單靠原生的 CSS 已經(jīng)無法滿足開發(fā)者的需求。

當(dāng)一種語(yǔ)言的能力不足，而用戶的運(yùn)行環(huán)境又不支持其他選擇時(shí)，這種語(yǔ)言就會(huì)成為一種“編譯目標(biāo)”語(yǔ)言，開發(fā)者會(huì)選擇另一種更高級(jí)的語(yǔ)言進(jìn)行開發(fā)，然后再編譯成低級(jí)語(yǔ)言進(jìn)行實(shí)際執(zhí)行，因此在前端領(lǐng)域，CSS預(yù)處理器應(yīng)運(yùn)而生，擔(dān)負(fù)起重任。

預(yù)處理器百花齊放

CSS 預(yù)處理器是一個(gè)允許您使用其自己獨(dú)特的語(yǔ)法生成 CSS 的程序。

市面上有很多 CSS 預(yù)處理器，絕大多數(shù)都加入了原生 CSS 所不具備或者不夠完善的高級(jí)特性，使得 CSS 的結(jié)構(gòu)更加易讀，也更加易于維護(hù)。

目前社區(qū)中主要的 CSS 預(yù)處理器有以下幾種：

• Sass：誕生于2007年，是最早最成熟的CSS預(yù)處理器，擁有Ruby社區(qū)和Compass的支持，是目前最強(qiáng)大的CSS框架，目前受LESS的影響，已經(jīng)演化為全面支持CSS的SCSS。
• Less：出現(xiàn)于 2009 年，深受 SASS 影響，但使用 CSS 語(yǔ)法，對(duì)大多數(shù)開發(fā)者和設(shè)計(jì)人員來說更容易上手。在 Ruby 社區(qū)之外，其支持者數(shù)量遠(yuǎn)超 SASS。其缺點(diǎn)是相比 SASS，可編程功能不足；但其優(yōu)勢(shì)在于簡(jiǎn)潔和與 CSS 的兼容性。這也影響了 SASS 向 SCSS 時(shí)代的演進(jìn)。著名的 Twitter Bootstrap 就是以 LESS 作為底層語(yǔ)言。
• Stylus：Stylus 是 2010 年從 Node.js 社區(qū)中誕生的 CSS 預(yù)處理器框架，主要用于為 Node 項(xiàng)目提供 CSS 預(yù)處理支持。因此，Stylus 是一種新型語(yǔ)言，可以創(chuàng)建類似于 SASS/LESS 的健壯、動(dòng)態(tài)、富有表現(xiàn)力的 CSS

各種預(yù)處理器功能雖然強(qiáng)大，但最常用的依然是：變量，混合，嵌套規(guī)則和代碼模塊化。

這些功能在 css 中也有

返回 CSS

各類 CSS 預(yù)處理器在更新迭代的過程中變得越來越復(fù)雜和花哨，但大多數(shù)人還是使用同樣的核心功能：變量、混合、嵌套、模塊，最多一些實(shí)用功能。

這些功能在 css 中依然存在

變量

CSS 自定義屬性（也稱為 CSS 變量）允許我們?cè)跇邮奖碇新暶髯兞坎⑼ㄟ^ var() 函數(shù)使用它們。

CSS 自定義屬性中的級(jí)聯(lián)變量規(guī)范于 2012 年 10 月首次作為工作草案（WD）提出，并于 2015 年 10 月進(jìn)入候選推薦（CR）階段?，F(xiàn)在瀏覽器支持率接近 93%。

圖片

CSS變量的定義及使用如下，可定義的類型非常廣泛。

/* 聲明 */
--VAR_NAME: <聲明值>;
/* 使用 */
var(--VAR_NAME)

/* 根元素選擇器（全局作用域），例如 <html> */
:root {
  /* CSS 變量聲明 */
  --main-color: #ff00ff;
  --main-bg: rgb(200, 255, 255);
  --logo-border-color: rebeccapurple;

  --header-height: 68px;
  --content-padding: 10px 20px;

  --base-line-height: 1.428571429;
  --transition-duration: .35s;
  --external-link: "external link";
  --margin-top: calc(2vh + 20px);
}

body {
  /* 使用變量 */
  color: var(--main-color);
}

與 SASS 預(yù)處理器變量的編譯時(shí)處理不同，CSS 變量由瀏覽器在運(yùn)行時(shí)處理，這使得它們更加強(qiáng)大和靈活

CSS 到 JS

在 CSS 變量出現(xiàn)之前，將值從 CSS 傳遞到 JS 非常困難，甚至需要一些 hack 技巧?，F(xiàn)在有了 CSS 變量，可以直接通過 JS 訪問變量值并進(jìn)行修改。

// 定義 CSS 變量
.breakpoints-data {
  --phone: 480px;
  --tablet: 800px;
}
const breakpointsData = document.querySelector('.breakpoints-data');

// 獲取 CSS 變量的值
const phone = getComputedStyle(breakpointsData)
    .getPropertyValue('--phone');

// 設(shè)置 CSS 變量的新值
breakpointsData.style
    .setProperty('--phone', 'custom');

除此之外還有很多 css 原生能力，比如：Mixins、運(yùn)算符，咱們就不再文章中一一列舉了。

總結(jié)

經(jīng)過一番梳理我們發(fā)現(xiàn)，CSS雖然在社區(qū)的刺激下加快了其更新迭代速度，但依然達(dá)不到CSS預(yù)處理器的水平，只能說在使用CSS預(yù)處理器的同時(shí)，也可以在項(xiàng)目中嘗試一些非常優(yōu)秀的CSS新特性，即：CSS preprocessor + CSS。

不過我們還是相信隨著 W3C 的推廣和 CSS 本身的不斷完善，CSS 預(yù)處理器終究會(huì)像CoffeScript和Jade當(dāng)年一樣成為過渡性的產(chǎn)品，到那時(shí)大家就不用再為不同 CSS 預(yù)處理器的各種環(huán)境配置和技術(shù)選擇而煩惱啦。