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

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

Microthemer的即時SASS彙編

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

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

性能基準

使用3000個選擇器，彙編時間徘徊在0.05秒左右，偶爾達到0.1秒或低至0.01秒（10ms）。視頻演示和在線操場可用於動手測試。

在線微揮舞著遊樂場

直接使用在線遊樂場直接對微揮發(fā)器進行實驗：

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. 使用目標按鈕創(chuàng)建選擇器。
6. 將SASS代碼添加到編輯器（字體屬性組的左側(cè)）。
7. 查看編譯的代碼： View → Generated CSS → Previous SCSS compile 。
8. 導(dǎo)入大型CSS（不是SASS）進行可伸縮性測試： Packs → Import → CSS stylesheet 。

NPM軟件包？

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

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

Microthemer的Sass彙編方法

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

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

SASS代碼示例

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

變量，功能和混合素

$初級色：綠色；
$二次色：紅色；
$深色：黑色；

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

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

選擇器

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

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

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

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

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

Microthemer的用戶界面

Microphemer使用兩個主要視圖：

1. 完整代碼視圖：全球元素的標準SASS編輯器。
2. 視覺視圖：基於選擇器的接口，其中每個選擇器是單獨的UI元素。

這種顆粒選擇方法可以進行高效的分析。 （注意：較早的屏幕截圖中的藍色錯誤按鈕是由於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)對於有效處理至關(guān)重要。 Microplemer使用四個主要JavaScript對象：

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

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

使用遞歸，智能識別gatherCompileResources功能，並收集了所有依賴代碼段以進行編譯。然後，申請過程編譯此最小代碼集並更新樣式。

NPM軟件包的注意事項

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

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

結(jié)論

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

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