Don't miss out on tutorials, special offers, and discounts we share with our subscribers!
We know that lots of you have been happily recommending Microthemer to your friends. This really helps us out. And to say thanks, we'd like to start giving you some commission for sending customers our way. Find out more.
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
Ultra fast Sass compilation with Microthemer for WordPress (5 mins)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:
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
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