increasing sass compilation time
TRANSCRIPT
![Page 1: Increasing Sass Compilation Time](https://reader034.vdocument.in/reader034/viewer/2022042701/55a9ad261a28ab86738b4616/html5/thumbnails/1.jpg)
Increasing Sass Compilation Time
Time saver for Front-end developer.
![Page 2: Increasing Sass Compilation Time](https://reader034.vdocument.in/reader034/viewer/2022042701/55a9ad261a28ab86738b4616/html5/thumbnails/2.jpg)
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
![Page 3: Increasing Sass Compilation Time](https://reader034.vdocument.in/reader034/viewer/2022042701/55a9ad261a28ab86738b4616/html5/thumbnails/3.jpg)
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
![Page 4: Increasing Sass Compilation Time](https://reader034.vdocument.in/reader034/viewer/2022042701/55a9ad261a28ab86738b4616/html5/thumbnails/4.jpg)
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
![Page 5: Increasing Sass Compilation Time](https://reader034.vdocument.in/reader034/viewer/2022042701/55a9ad261a28ab86738b4616/html5/thumbnails/5.jpg)
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
![Page 6: Increasing Sass Compilation Time](https://reader034.vdocument.in/reader034/viewer/2022042701/55a9ad261a28ab86738b4616/html5/thumbnails/6.jpg)
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.
![Page 7: Increasing Sass Compilation Time](https://reader034.vdocument.in/reader034/viewer/2022042701/55a9ad261a28ab86738b4616/html5/thumbnails/7.jpg)
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.
![Page 8: Increasing Sass Compilation Time](https://reader034.vdocument.in/reader034/viewer/2022042701/55a9ad261a28ab86738b4616/html5/thumbnails/8.jpg)
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.
![Page 9: Increasing Sass Compilation Time](https://reader034.vdocument.in/reader034/viewer/2022042701/55a9ad261a28ab86738b4616/html5/thumbnails/9.jpg)
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!
![Page 10: Increasing Sass Compilation Time](https://reader034.vdocument.in/reader034/viewer/2022042701/55a9ad261a28ab86738b4616/html5/thumbnails/10.jpg)
Result• Compilation time changed
• from: 33.56 s
• to: 1.54 s
• Biggest impact:
• LibSass http://libsass.org
• Susy
![Page 11: Increasing Sass Compilation Time](https://reader034.vdocument.in/reader034/viewer/2022042701/55a9ad261a28ab86738b4616/html5/thumbnails/11.jpg)
But
• I need SUSY, Breakpoint and Sprites!
• LibSass doesn’t allow me to use Compass Sprites.
![Page 12: Increasing Sass Compilation Time](https://reader034.vdocument.in/reader034/viewer/2022042701/55a9ad261a28ab86738b4616/html5/thumbnails/12.jpg)
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%)
![Page 13: Increasing Sass Compilation Time](https://reader034.vdocument.in/reader034/viewer/2022042701/55a9ad261a28ab86738b4616/html5/thumbnails/13.jpg)
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%)
![Page 14: Increasing Sass Compilation Time](https://reader034.vdocument.in/reader034/viewer/2022042701/55a9ad261a28ab86738b4616/html5/thumbnails/14.jpg)
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 ;-)
![Page 15: Increasing Sass Compilation Time](https://reader034.vdocument.in/reader034/viewer/2022042701/55a9ad261a28ab86738b4616/html5/thumbnails/15.jpg)
CSS Sprites
• Sprites are done now as separate grunt task.
• For sprites you can use Spritesmith https://github.com/Ensighten/grunt-spritesmith
![Page 16: Increasing Sass Compilation Time](https://reader034.vdocument.in/reader034/viewer/2022042701/55a9ad261a28ab86738b4616/html5/thumbnails/16.jpg)
Others
• To mesure execution time of Grunt tasks you can use time-grunt https://github.com/sindresorhus/time-grunt
• Example:
![Page 17: Increasing Sass Compilation Time](https://reader034.vdocument.in/reader034/viewer/2022042701/55a9ad261a28ab86738b4616/html5/thumbnails/17.jpg)
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!
![Page 18: Increasing Sass Compilation Time](https://reader034.vdocument.in/reader034/viewer/2022042701/55a9ad261a28ab86738b4616/html5/thumbnails/18.jpg)
LibSass Starter
• Our LibSass project starter is open source, you can fork it from our GitHub account:https://github.com/Pagepro/libsasserplate
![Page 19: Increasing Sass Compilation Time](https://reader034.vdocument.in/reader034/viewer/2022042701/55a9ad261a28ab86738b4616/html5/thumbnails/19.jpg)
Thank you!Developing the web in the heart of Europe.