使Sass更快的概念證明

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

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

Microthemer的即時SASS彙編

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

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

性能基準

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

在線微揮舞著遊樂場

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

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

NPM軟件包？

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

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

Microthemer的Sass彙編方法

研究代碼之前，讓我們回顧一下關鍵設計目標：

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

SASS代碼示例

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

變量，功能和混合素

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

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

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

選擇器

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

.btn {
  顯示：內聯塊；
  填充：1EM；
  顏色：白色；
  文本介紹：無；
}

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

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

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

Microthemer的用戶界面

Microphemer使用兩個主要視圖：

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

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

第三方圖書館

微揮發器槓桿：

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

數據結構

核心數據結構對於有效處理至關重要。 Microplemer使用四個主要JavaScript對象：

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

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

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

NPM軟件包的注意事項

適應NPM軟件包需要解決：

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

結論

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

以上是使Sass更快的概念證明的詳細內容。更多資訊請關注PHP中文網其他相關文章！