Slides to my talk on Meet Magento Germany 2016

1. COMMER CE & MOBILE SOLUTIONS
Magento 2 Community Project
Moving from LESS to SASS
BARTEK IGIELSKI
LEAD FRONT-END DEVELOPER

2. What is wrong with LESS?

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. 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. Quantity of global variables defined:
Magento UI - 1216
Admin theme - 1233
Blank theme - 320
Luma theme - 355

6. Ability to create „array of mixins”
// LESS Code
.mixin() { /* 1 */ }
.mixin() { /* 2 */ }
.mixin() { /* 3 */ }
body { .mixin(); }
// CSS Output
body {
/* 1 + 2 + 3 */
}

7. Weird conditional statements
.mixin() when (condition) { … }
selector when (condition) { … }
selector {
& when (condition) {
…
}
}

8. Why we chose SASS?

10. Performance
Frontools - LESS/SASS + Autoprefixer
Blank LESS - ~8 seconds
Blank SASS - ~3 seconds

11. if / else statements
for / while / each loops

12. %placeholder selectors

13. But… We are not going to
change just a language

14. Frontend Development Methodology
Naming convention + Styles achitecture

15. • How to simplify code and refactoring?
• How to get self-documenting code?
• How to start reusing code without letting
components influence each other?

17. BEM
Block + Element + Modifier

18. Code documentation / Style guide
Provide solid documentation
to enforce best practice

19. Reduce Magento “magic”
Keep things simple and semantic

20. Tooling
Make deployment pipeline friendly with
external tools

21. Modularity
Decouple as many things
from theme as possible

22. Roadmap
Ok… kind of roadmap

23. Magento UI
It should to provide ready to use
components, not only set of (little bit
overcomplicated) mixins.

24. Rebuild „Blank” theme
Using Magento UI and our
development methodology

25. Improve Frontools
100% replacement of CLI methods
related to front-end work

26. Estimated release time
~Q4/2016

27. „Front-end devs should
make front-end using
front-end oriented tools”
…
Yeah, that’s my „wisdom”

28. Partners in crime
• Interactiv4
• Magento
• MindMagnet
• Rocket Web
• Snowdog
• Vinai Kopp
• Atwix
• Blue Acorn
• CTI Digital
• Demac Media
• Fooman
• Gravity Department
• Inchoo

29. 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