Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Magento 2 Community Project - Moving from LESS to SASS

2,042 views

Published on

Slides to my talk on Meet Magento Germany 2016

Published in: Technology
  • Be the first to comment

Magento 2 Community Project - Moving from LESS to SASS

  1. 1. COMMER CE & MOBILE SOLUTIONS Magento 2 Community Project Moving from LESS to SASS BARTEK IGIELSKI
 LEAD FRONT-END DEVELOPER
  2. 2. What is wrong with LESS?
  3. 3. LESS is waaaay too „soft” It let’s you do so many bad things, instead of yealing: „YOU STUPID BASTARD, 
 I CAN’T HANDLE THIS”
  4. 4. You can set value of variable after place where use that variable // LESS Code @variable: red; body { color: @variable; } @variable: blue; // CSS Output body { color: blue; }
  5. 5. Quantity of global variables defined: Magento UI - 1216
 Admin theme - 1233 Blank theme - 320 Luma theme - 355
  6. 6. Ability to create „array of mixins” // LESS Code .mixin() { /* 1 */ } .mixin() { /* 2 */ } .mixin() { /* 3 */ } body { .mixin(); } // CSS Output body { /* 1 + 2 + 3 */ }
  7. 7. Weird conditional statements .mixin() when (condition) { … } selector when (condition) { … } selector { & when (condition) { … } }
  8. 8. Why we chose SASS?
  9. 9. Performance Frontools - LESS/SASS + Autoprefixer Blank LESS - ~8 seconds Blank SASS - ~3 seconds
  10. 10. if / else statements for / while / each loops
  11. 11. %placeholder selectors
  12. 12. But… We are not going to change just a language
  13. 13. Frontend Development Methodology Naming convention + Styles achitecture
  14. 14. • How to simplify code and refactoring? • How to get self-documenting code? • How to start reusing code without letting components influence each other?
  15. 15. BEM Block + Element + Modifier
  16. 16. Code documentation / Style guide Provide solid documentation
 to enforce best practice
  17. 17. Reduce Magento “magic” Keep things simple and semantic
  18. 18. Tooling Make deployment pipeline friendly with external tools
  19. 19. Modularity
 Decouple as many things from theme as possible
  20. 20. Roadmap
 Ok… kind of roadmap
  21. 21. Magento UI
 It should to provide ready to use components, not only set of (little bit overcomplicated) mixins.
  22. 22. Rebuild „Blank” theme
 Using Magento UI and our development methodology
  23. 23. Improve Frontools 100% replacement of CLI methods related to front-end work
  24. 24. Estimated release time ~Q4/2016
  25. 25. „Front-end devs should make front-end using
 front-end oriented tools” … Yeah, that’s my „wisdom”
  26. 26. Partners in crime • Interactiv4 • Magento • MindMagnet • Rocket Web • Snowdog • Vinai Kopp • Atwix • Blue Acorn • CTI Digital • Demac Media • Fooman • Gravity Department • Inchoo
  27. 27. How to stay updated? Twitter @Igloczek <- it’s me :) @SnowdogApps <- Snowdog (you don’t say!) GitHub https://github.com/SnowdogApps/magento2-theme-blank-sass https://github.com/SnowdogApps/magento2-frontools Magento Forums https://community.magento.com/t5/Less-to-Sass-Community-Project/bd-p/less-to-sass

×