最初，SASS匯編非常快，尤其是與瀏覽器同步一起用于即時(shí)瀏覽器更新時(shí)。但是，隨著SASS項(xiàng)目的增長(zhǎng)，匯編時(shí)間不可避免地會(huì)增加，從而影響工作流程。本文介紹了WordPress CSS編輯Microphemer中證明的解決方案，以解決此性能瓶頸。

這是兩部分探索。第一部分側(cè)重于Sass用戶的好處，展示核心原則，績(jī)效改進(jìn)和交互式演示。第二部分深入研究了Microphemer速度優(yōu)化的技術(shù)細(xì)節(jié)，并探討了NPM軟件包受益于更廣泛開發(fā)人員社區(qū)的潛力。

Microthemer的即時(shí)SASS匯編

Microphemer僅通過僅編譯必要的SASS代碼來實(shí)現(xiàn)出色的性能。它不會(huì)修改SASS的內(nèi)部匯編，而是明智地選擇了重新編譯所需的最小代碼。

這是通過跟蹤SASS實(shí)體（變量，Mixins等）及其用法來實(shí)現(xiàn)的。當(dāng)選擇器更改時(shí)，僅重新編譯選擇器和直接相關(guān)的選擇器（共享變量或擴(kuò)展其他選擇器）。即使有成千上萬(wàn)的選擇器，這也保持速度。

性能基準(zhǔn)

使用3000個(gè)選擇器，匯編時(shí)間徘徊在0.05秒左右，偶爾達(dá)到0.1秒或低至0.01秒（10ms）。視頻演示和在線操場(chǎng)可用于動(dòng)手測(cè)試。

在線微揮舞著游樂場(chǎng)

直接使用在線游樂場(chǎng)直接對(duì)微揮發(fā)器進(jìn)行實(shí)驗(yàn)：

1. 訪問Microthemer Playground。
2. 啟用S??ASS支持： General → Preferences → CSS / SCSS → Enable SCSS 。
3. 打開完整的代碼編輯器： View → full code editor → on （用于全局變量，Mixins等）。
4. 返回主UI視圖： View → full code editor → off 。
5. 使用目標(biāo)按鈕創(chuàng)建選擇器。
6. 將SASS代碼添加到編輯器（字體屬性組的左側(cè)）。
7. 查看編譯的代碼： View → Generated CSS → Previous SCSS compile 。
8. 導(dǎo)入大型CSS（不是SASS）進(jìn)行可伸縮性測(cè)試： Packs → Import → CSS stylesheet 。

NPM軟件包？

Microthemer的選擇性匯編可以作為NPM模塊包裝。這是您發(fā)現(xiàn)有價(jià)值的東西嗎？速度提高您的SASS工作流程會(huì)有益嗎？在評(píng)論中讓我們知道。

本文的其余部分針對(duì)社區(qū)工具的開發(fā)人員以及對(duì)解決方案的實(shí)施感到好奇的人。

Microthemer的Sass匯編方法

研究代碼之前，讓我們回顧一下關(guān)鍵設(shè)計(jì)目標(biāo)：

1. 最小代碼匯編：僅編譯更改的選擇器或最小相關(guān)選擇器集。
2. 響應(yīng)能力：消除感知的滯后；最小化用戶交互之間的處理。
3. 等效輸出：將相同的CSS與完整匯編生成，但對(duì)于代碼的一部分。

SASS代碼示例

以下代碼說明了由選擇性編譯器處理的方案：全局變量，混合副作用和擴(kuò)展的選擇器。

變量，功能和混合素

$初級(jí)色：綠色；
$二次色：紅色；
$深色：黑色；

@function torem（$ px，$ rootsize：16）{
  @return＃{$ px / $ rootsize} rem;
}

@mixin founded（）{
  邊界拉迪烏斯：999px;
  $ secondary-color：blue！global;
}

選擇器

.entry-title {
  顏色：$深色；
}

.btn {
  顯示：內(nèi)聯(lián)塊；
  填充：1EM；
  顏色：白色；
  文本介紹：無(wú)；
}

.btn-Success {
  @extend .btn;
  背景色：$ priendar-color;
  @include圓滿；
}

.btn-error {
  @extend .btn;
  背景色：$二次色；
}

@Media（最小寬度：960px）{
  .btn-Success {
    邊界：4px固體變暗（$ priendar顏色，10％）；
    ＆：：前 {
      內(nèi)容：“ \ 2713”；
      邊緣右：.5em;
    }
  }
}

Microthemer的用戶界面

Microphemer使用兩個(gè)主要視圖：

1. 完整代碼視圖：全球元素的標(biāo)準(zhǔn)SASS編輯器。
2. 視覺視圖：基于選擇器的接口，其中每個(gè)選擇器是單獨(dú)的UI元素。

這種顆粒選擇方法可以進(jìn)行高效的分析。 （注意：較早的屏幕截圖中的藍(lán)色錯(cuò)誤按鈕是由于Mixin副作用更改$secondary-color 。）

第三方圖書館

微揮發(fā)器杠桿：

• Gonzales PE：用于Sass-to-ast conversion依。
• SASS.JS：用于基于瀏覽器的SASS-TO-CSS編譯（使用Web Worker）。

數(shù)據(jù)結(jié)構(gòu)

核心數(shù)據(jù)結(jié)構(gòu)對(duì)于有效處理至關(guān)重要。 Microplemer使用四個(gè)主要JavaScript對(duì)象：

1. projectCode ：存儲(chǔ)所有項(xiàng)目代碼，用于各個(gè)選擇器。
2. projectEntities ：跟蹤變量，功能，混合，擴(kuò)展，進(jìn)口及其位置。
3. connectedEntities ：映射SASS實(shí)體的代碼依賴性。
4. compileResources ：保留選擇性編譯的數(shù)據(jù)。

這些對(duì)象及其屬性的詳細(xì)說明（例如， projectCode ， itemData ， projectEntities ， itemDeps ， connectedEntities ， compileResources ）是廣泛的，并且會(huì)大大增加此已長(zhǎng)期響應(yīng)的長(zhǎng)度。但是，核心概念是這些結(jié)構(gòu)允許對(duì)依賴關(guān)系有效跟蹤，并且僅選擇必要的重新編譯代碼。

使用遞歸，智能識(shí)別gatherCompileResources功能，并收集了所有依賴代碼段以進(jìn)行編譯。然后，申請(qǐng)過程編譯此最小代碼集并更新樣式。

NPM軟件包的注意事項(xiàng)

適應(yīng)NPM軟件包需要解決：

• 代碼細(xì)分：有效處理較大的文件和潛在的虛擬分割技術(shù)。
• SASS Imports：跟蹤所有項(xiàng)目文件中的SASS使用情況，而不是不加選擇的所有導(dǎo)入。

結(jié)論

這種方法為選擇性SASS編譯提供了一種新穎的方法。近構(gòu)的匯編對(duì)于微掩護(hù)者的實(shí)時(shí)編輯至關(guān)重要，但也可以使其他環(huán)境受益。創(chuàng)建NPM軟件包的決定取決于社區(qū)需求。歡迎反饋和問題。

以上是使Sass更快的概念證明的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！