C O M M E R C E & M O B I L E S O LU T I O N S

Magento 2 Community Project Moving from LESS to SASS

BARTEK IGIELSKILEAD FRONT-END DEVELOPER

What is wrong with LESS?

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”

You can set value of variable after place where use that variable

// LESS Code@variable: red;body { color: @variable; }@variable: blue;

// CSS Outputbody { color: blue; }

Quantity of global variables defined: Magento UI - 1216

Admin theme - 1233 Blank theme - 320 Luma theme - 355

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

// CSS Outputbody { /* 1 + 2 + 3 */}

Weird conditional statements

.mixin() when (condition) { … }selector when (condition) { … }selector { & when (condition) { … }}

Why we chose SASS?

Performance Frontools - LESS/SASS + Autoprefixer

Blank LESS - ~8 seconds Blank SASS - ~3 seconds

if / else statements for / while / each loops

%placeholder selectors

But… We are not going to change just a language

Frontend Development Methodology Naming convention + Styles achitecture

• How to simplify code and refactoring? • How to get self-documenting code? • How to start reusing code without letting

components influence each other?

BEM Block + Element + Modifier

Code documentation / Style guide Provide solid documentation

to enforce best practice

Reduce Magento “magic” Keep things simple and semantic

Tooling Make deployment pipeline friendly with

external tools

Modularity Decouple as many things from theme as possible

RoadmapOk… kind of roadmap

Magento UIIt should to provide ready to use

components, not only set of (little bit overcomplicated) mixins.

Rebuild „Blank” themeUsing Magento UI and our development methodology

Improve Frontools 100% replacement of CLI methods

related to front-end work

Estimated release time ~Q4/2016

„Front-end devs should make front-end using

front-end oriented tools” …

Yeah, that’s my „wisdom”

Partners in crime• Interactiv4 • Magento • MindMagnet • Rocket Web • Snowdog • Vinai Kopp

• Atwix • Blue Acorn • CTI Digital • Demac Media • Fooman • Gravity Department • Inchoo

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