Initially, Sass compilation is incredibly fast, especially when used with Browsersync for instant browser updates. However, as your Sass project grows, compilation time inevitably increases, impacting workflow. This article presents a solution, demonstrated in the WordPress CSS editor Microthemer, to address this performance bottleneck.

This is a two-part exploration. Part one focuses on the benefits for Sass users, showcasing core principles, performance improvements, and an interactive demo. Part two delves into the technical details of Microthemer's speed optimization and explores the potential for an npm package to benefit a wider developer community.

Microthemer's Instant Sass Compilation

Microthemer achieves remarkable performance by compiling only the necessary Sass code. It doesn't modify Sass's internal compilation, but rather intelligently selects the minimal code required for recompilation.

This is achieved by tracking Sass entities (variables, mixins, etc.) and their usage. When a selector changes, only that selector and directly related selectors (sharing variables or extending others) are recompiled. This maintains speed even with thousands of selectors.

Performance Benchmarks

With 3000 selectors, compilation time hovers around 0.05 seconds, occasionally reaching 0.1 seconds or as low as 0.01 seconds (10ms). A video demonstration and an online playground are available for hands-on testing.

Online Microthemer Playground

Experiment with Microthemer directly using the online playground:

1. Access the Microthemer playground.
2. Enable Sass support: General → Preferences → CSS / SCSS → Enable SCSS.
3. Open the full code editor: View → full code editor → on (for global variables, mixins, etc.).
4. Return to the main UI view: View → full code editor → off.
5. Create selectors using the Target button.
6. Add Sass code to the editor (left of the Font property group).
7. View the compiled code: View → Generated CSS → Previous SCSS compile.
8. Import large CSS (not Sass) for scalability testing: Packs → Import → CSS stylesheet.

An npm Package?

Microthemer's selective compilation could be packaged as an npm module. Is this something you'd find valuable? Would a speed boost to your Sass workflow be beneficial? Let us know in the comments.

The remainder of this article targets developers of community tools and those curious about the solution's implementation.

Microthemer's Approach to Sass Compilation

Before diving into code, let's review the key design goals:

1. Minimal Code Compilation: Compile only the changed selector or the minimal set of related selectors.
2. Responsiveness: Eliminate perceived lag; minimize processing between user interactions.
3. Equivalent Output: Generate identical CSS to a full compilation, but for a subset of the code.

Sass Code Examples

The following code illustrates scenarios handled by the selective compiler: global variables, mixin side effects, and extended selectors.

Variables, Functions, and Mixins

$primary-color: green;
$secondary-color: red;
$dark-color: black;

@function toRem($px, $rootSize: 16){
  @return #{$px / $rootSize}rem;
}

@mixin rounded(){
  border-radius: 999px;
  $secondary-color: blue !global;
}

Selectors

.entry-title {
  color: $dark-color;
}

.btn {
  display: inline-block;
  padding: 1em;
  color: white;
  text-decoration: none;
}

.btn-success {
  @extend .btn;
  background-color: $primary-color;
  @include rounded;
}

.btn-error {
  @extend .btn;
  background-color: $secondary-color;
}

@media (min-width: 960px) {
  .btn-success {
    border:4px solid darken($primary-color, 10%);
    &::before {
      content: "\2713";
      margin-right: .5em;
    }
  }
}

Microthemer's User Interface

Microthemer uses two main views:

1. Full Code View: A standard Sass editor for global elements.
2. Visual View: A selector-based interface where each selector is a separate UI element.

This granular selector approach allows for highly efficient analysis. (Note: The blue error button in earlier screenshots is due to a mixin side effect changing $secondary-color.)

Third-Party Libraries

Microthemer leverages:

• Gonzales PE: For Sass-to-AST conversion.
• Sass.js: For browser-based Sass-to-CSS compilation (using web workers).

Data Structures

The core data structures are crucial for efficient processing. Microthemer uses four main JavaScript objects:

1. projectCode: Stores all project code, segmented for individual selectors.
2. projectEntities: Tracks variables, functions, mixins, extends, imports, and their locations.
3. connectedEntities: Maps code dependencies on Sass entities.
4. compileResources: Holds data for selective compilation.

The detailed explanation of these objects and their properties (e.g., projectCode, itemData, projectEntities, itemDeps, connectedEntities, compileResources) is extensive and would significantly increase the length of this already long response. However, the core concept is that these structures allow for efficient tracking of dependencies and the selection of only the necessary code for recompilation.

The gatherCompileResources function, using recursion, intelligently identifies and gathers all dependent code segments for compilation. The application process then compiles this minimal code set and updates the styles.

Considerations for an npm Package

Adapting this for an npm package requires addressing:

• Code Segmentation: Efficiently handling larger files and potential virtual segmentation techniques.
• Sass Imports: Tracking Sass usage across all project files, rather than including all imports indiscriminately.

Conclusion

This approach offers a novel method for selective Sass compilation. The near-instant compilation is crucial for Microthemer's live editing, but could also benefit other environments. The decision to create an npm package depends on community demand. Feedback and questions are welcome.

The above is the detailed content of A Proof of Concept for Making Sass Faster. For more information, please follow other related articles on the PHP Chinese website!