Increasing Sass Compilation Time

Time saver for Front-end developer.

About Pagepro:

• Internet Software House from Poland • Operating since 2010 • Clients from Western Europe and U.S. • 176 projects done in 2014 • 1758 PSDs converted into

HTML5 in 2014

Starting Point

• GRUNT http://gruntjs.com

• COMPASS http://compass-style.org

• CSS Sprites http://compass-style.org/help/tutorials/spriting

• SUSY Grid system http://susy.oddbird.net

• Brakepoint http://breakpoint-sass.com

Initial Compilation Time• I’ve made 5 tests:

• 34.78 s

• 33.86 s

• 32.67 s

• 32.83 s

• 33.66 s

• Averange compilation time: 33.56 s

Step 1: Remove Sprites• After removing Compass Sprites:

• 33.59 s

• 31.33 s

• 36.81 s

• 32.11 s

• 32.07 s

• Averange compilation time: 33.18 s

Compilation time change:

-0.38 s (1.13%)

Conclusion: small impact

Step 2: Remove SUSY• After removing SUSY Grid system:

• 21.40 s

• 19.15 s

• 20.54 s

• 19.87 s

• 19.66 s

• Averange compilation time: 20.13 s

Compilation time change:

-13.43 s (40.03%)

Conclusion: big impact

SUSY can slow you down.

Step 3: Remove Breakpoint• After removing Breakpoint:

• 17.68 s

• 16.02 s

• 16.14 s

• 16.05 s

• 15.84 s

• Averange compilation time: 16.35 s

Compilation time change:

-17.21 s (51.29%)

Conclusion: small impactBreakpoint can slow you down, but not as much as SUSY.

Step 4: Replacing COMPASS Framework with Sass Mixins

• I’ve replaced Compass with set of mixins: https://github.com/Igosuki/compass-mixins

• 16.83 s

• 16.68 s

• 16.97 s

• 17.28 s

• 17.01 s

• Averange compilation time: 16.95 s

Compilation time change:

-16.60 s (49.48%)

Conclusion: small impactCompass framework doesn’t slow you down.

Step 5: Replacing grunt-compass with grunt-sass

• I’ve used grunt-sass to compile Sass using LIBSAS http://libsass.org

• 1.5 s

• 1.5 s

• 1.6 s

• 1.6 s

• 1.5 s

• Averange compilation time: 1.54 s

Compilation time change:

-32.02 s (95.41%)

Conclusion: big impact

Libsass is extremely fast!

Result• Compilation time changed

• from: 33.56 s

• to: 1.54 s

• Biggest impact:

• LibSass http://libsass.org

• Susy

But

• I need SUSY, Breakpoint and Sprites!

• LibSass doesn’t allow me to use Compass Sprites.

Step 6: Adding Breakpoint• I’ve used Breakpoint with LibSass:

• 1.8 s

• 1.8 s

• 1.8 s

• 1.8 s

• 1.8 s

• Averange compilation time: 1.8 s

Compilation time change:

-31.76 s (94.64%)

Step 7: Adding SUSY• I’ve added SUSY:

• 4.3 s

• 4.6 s

• 4.9 s

• 4.7 s

• 4.3 s

• Averange compilation time: 4.56 s

Compilation time change:

-28.62 s (86.26%)

Summary

• Replacing grunt-compass (Ruby Sass compilator) with grunt-sass (C Sass compilator) saves a lot of time.

• We saved -28.62 s (86.26%) and:

• compilation is less annoying now ;-)

CSS Sprites

• Sprites are done now as separate grunt task.

• For sprites you can use Spritesmith https://github.com/Ensighten/grunt-spritesmith

Others

• To mesure execution time of Grunt tasks you can use time-grunt https://github.com/sindresorhus/time-grunt

• Example:

Others• Grunt task loading can take lots of time, you can

lazy load them, recommended solution: jit-grunt https://github.com/shootaroo/jit-grunt

• Before:

• After:

• We’ve saved another second!

LibSass Starter

• Our LibSass project starter is open source, you can fork it from our GitHub account:https://github.com/Pagepro/libsasserplate

Thank you!Developing the web in the heart of Europe.