Magento2: Use SASS for default theme?

Created on 4 Jun 2015  路  13Comments  路  Source: magento/magento2

I noticed a few months ago you were using LESS. I would much prefer SASS and for those who have developing in Magento1 with SASS with the RWD theme it would make more sense to use SASS instead.

There is enough change in Magento2 already, not all of it good :)

Most helpful comment

We are working on a plan to move towards SaSS.

All 13 comments

It's Sass. :wink:

Sass makes more sense because its community is outpacing Less and many larger projects are written in or moving to Sass (Bootstrap 4, for instance). Likewise, what @craigcarnell says, the RWD theme in 1.9 is written in Sass.

You are right but the fact is that the Magento community already knows about the fact and when the development of Magento2 satarted SAAS was not as stable while less was stable so they decided to move on with less. But with so many improvements to come in Magento2 i donot know how long can it take to switch back to SAAS as currently RWD theme in Magento CE 1.9.x do.

@afroz92 Perhaps, but it doesn't take that long to convert for someone who's familiar with the theme.

However, I didn't account for the fact that Less has a JS compiler. Maybe that's something they want to keep, to keep it simple for new users. After all, a developer's most likely going to start from ground zero anyway.

I think in later versions of Magento2 we might see a SAAS based theme like RWD.

Hello @craigcarnell, @afroz92, @Fequois

Despite the fact that Sass more popular than Less and maybe you can say more powerful. Less was chosen for couple good reasons and advantage are still relevant now.

  • Less can be compiled by PHP with Oyejorge on server side. No need to use ruby and expand Magento platform requirements.
  • Less can be processed with JS on client side. For whom who doesn't care about preprocessors or need quick changes.
  • Less faster when you working with it locally. Specially comparing with ruby Sass.
  • Less is less strict with variables and mixins which gives a great flexibility when you a working with modules, themes and media queries.

Of course it's tricky discussion. And lot of developers can disagree. There is LibSass and Chris Eppstein announced JS Sass. But I at the moment Less is more suitable style language for platforms.

Moreover you can always rewrite Less to Sass in your project without the big efforts.

And I have hope, when JS Sass will be stable and LibSass will support all Sass features we will see new themes on Sass.

You have 4 points... All of which have been addressed. I used to be a supporter of pushing LESS forward, but the efforts of Google and the community have left it frankly irreparably behind. Count the amount of Yeoman generators that default to SASS vs LESS, the numbers are strikingly bad for LESS.

  • SASS can be reliably compiled to CSS using PHP alone https://github.com/leafo/scssphp/ plus, there is really very little need for magento to take on the role of compiler. The default theme should be the de facto developer reference theme.
  • Even for development, it quickly becomes too cumbersome to do client side processing of LESS. In fact, the LESS documentation argues against that approach, it is merely an option for the smallest of themes. Not to mention LESS.js has serious limitations vs it's developer side counter part.
  • With a decent development environment, libsass is ludicrously fast. I suggest taking a look a the grunt-symfony generator. It checks for changes to scss files, pushes them via browsersync node server and updates the css on the page dynamically, within a couple seconds.
  • SASS is flexible, and you need not use all of it's features. One of the early benefits of sass was it's much stronger support for modules, media queries and plugins (compass).

TL;DR;
LibSass is ready. Sass is the developer gold standard. Magento is not Grunt/BrowserSync/Watch/Uglify/JsHint/CriticalCSS/UnCSS, nor should it be. Our development tools move too fast and ECommerce solutions are too competitive to allow for such luxury.

PS
This is the #1337 issue, it should be accepted and assigned.

@vpelipenko Shame your not actually listening to the community!

@craigcarnell, reopened again. As I know we don't have plans for the nearest future to change something in this area. Added PROD label to get more information from Product Team.

Magento gives you possibility to use Sass if you want so.

if i choose Sass instead of Less, what about the default theme files? i know less and sass have similarities but don't know if just changing the files it can do the work.. @tkacheva , talking about magento 2, just for the doubts.

Any news on this topic? I just installed my first magento 2 and would like to change from LESS to Sass before making first changes to the luma-theme. Would be great to have a tutorial or step-by-step instructions. Am I on the right path saying that I'll need to install https://github.com/leafo/scssphp/ and then make magento use it like this https://medium.com/@jjmu15/swapping-less-for-sass-in-magento-2-6bcaf10e8ce7#.vvkmpm1wy or this https://twitter.com/benmarks/status/590219053437833217? And of course I probably need to convert all the default .less to .scss files or can Sass compile LESS? (I doubt it.)
On the otherside I for me would be okay with compiling it via grunt like before, would love to have some best practices on using Sass with magento 2 from people whom already dealt and worked with it, I'm still very new to the new system and honestly haven't yet had a change to digg in to deep into the details.

We are working on a plan to move towards SaSS.

THANK YOU!!!!!!

Was this page helpful?
0 / 5 - 0 ratings