Is Microthemer the world’s fastest Sass development tool?

What is Microthemer?

Microthemer is a WordPress CSS Editor in the form a WordPress plugin. It provides point and click editing facilities for beginners, as well as advanced inspection and editing tools for more experienced programmers.

What is Sass

Sass is like CSS but with extra features to help you write less code. It eliminates the repetition that can occur with plain CSS by introducing functions, mixins, and variables (before CSS introduced variables). This allows for code reuse and consequently makes designing sites more fun.

Sass ‘compiles‘ to plain CSS code. Typically this happens in a NodeJS environment running on a developer’s machine. But Microthemer provides an easy way to develop with Sass by simply logging into your WordPress site. And as of today, Microthemer solves the problem of slow compilation on large Sass projects.

Super fast Sass compilation at scale 

After 6 weeks of intense development, the new ultra-fast Sass workflow is ready for beta testing. The main challenge was making the compilation process so fast that it doesn’t violate the expectations of a live CSS editor.

We were keen to support Sass without introducing the kind of lag that can typically occur on large projects involving hundreds or thousands of selectors. This took some innovation. But I’m very pleased to say that we’ve accomplished our goal. The compilation process takes approximately 0.05 seconds even with 3K+ selectors (which generates a 20K line Sass file).

Watch the video demonstration

Highly optimised ‘compile manager’

To make near instant compilation possible at scale, we created a compile manager that compiles only what is needed to produce the correct CSS output. This required Microthemer to establish a deep understanding of Sass entities. So it now tracks usage of variables, functions, mixins, extends, and imports. And then uses this information to compile a subset of selectors.

If a selector makes no use of the aforementioned Sass entities, only the single selector is compiled. But if there is some co-dependence between multiple selectors, additional selectors are included in the compile process.

Co-dependence might happen when selectors:

• extend other selectors,
• use or set global variables
• use functions or mixins that may have side-effects (e.g. updating variables with the !global flag)

The number of co-dependent selectors will always remain fairly low. This means that as your project grows you can enjoy all the benefits of Sass without having to accept longer compilation time as a trade-off.

Microthemer’s compile manager might make it the fastest Sass development environment there is, on large projects at least. It’s noticeably faster than my desktop NodeJS environment running lib-sass via gulp. I am interested to hear how it compares with other peoples’ environments.

Attribution

I would like to thank @medialize for creating a JavaScript Sass parser that we could build on. Their parser converts Sass to CSS in the browser pretty quickly, even without Microthemer’s compile manager optimising the process further.

Caveats

• Microthemer currently only supports the more recent SCSS syntax. It doesn’t support the old Sass syntax.
• Microthemer doesn’t have a deep understanding of Sass code in imported files. So imported libraries will be included on each style change in Microthemer (if the individual selector being edited makes use of any Sass entities – variables, functions, mixins, extends).
• The very first compile takes longer than all subsequent compiles (e.g .5 vs .05-.1 seconds). I suspect this is due to internal optimisations in the core Sass library or Chrome.
• There are two main interface views in Microthemer. A main GUI view where one GUI selector is edited at a time. And a full code editor which can be edited in the same way as a regular .scss file. Microthemer only selectively compiles selectors in the main GUI view. If you only use the full code editor, all code will be included in each compile.

Implications for the future of Microthemer

Users have requested GUI support for variables and presets (mixins). With the latest developments, this can be supported by using regular Sass variables and mixins.

Less technical users will be able to manage variables and presets via new GUI fields, but under the hood, they will be editing Sass variables and mixins.

Sass coders will have a choice – edit the Sass code directly, or via GUI fields. This is comparable to the way CSS styles can be edited via the code editor or GUI fields interchangeably. Right now, this is only supported if Sass isn’t enabled, but it will be supported in the near future now that Microthemer has a deep understanding of SassScript.

Try Microthemer

Note: to enable Sass support go to General > Preferences > CSS / SCSS > Enable SCSS

• Online playground
• One month free trial