Magento 2 natively incorporates LESS, a CSS pre-processor that simplifies the management of complex CSS files. This post explains the decision behind Magento 2 selecting LESS over SASS. (Spoiler: LESS and SASS are very similar but there were good quality LESS pre-processors implemented in PHP when we had to commit for Magento 2, with none yet stable for SASS.)
Acknowledgement: Thanks to @VasiliySeleznev for lots of background material.
Disclaimer: These opinions are my own (except the ones I stole from Vasiliy!) – they do not necessarily represent the opinion of eBay.
LESS and SASS
Both LESS and SASS are pretty similar
and much of the syntax is identical – SASS is however more powerful. Both look like CSS but extend CSS with additional functionality such as nesting, functions, variables, etc. SASS seems to have some more powerful (or at least complex) constructs such as loops. You can use your favorite search engine to find lots of articles on both LESS and SASS so I am not going to get into technical details here. They both make CSS easier to manage and maintain, especially on large projects. And if you had not noticed, Magento is a large project!
One of the changes in Magento 2 with the adoption of a CSS pre-processor is the CSS provided with Magento is now supplied as a library developers can build upon and extend. You can still replace the whole library, and that is OK, but a CSS pre-processor makes it easier to reuse the supplied library.
So Why LESS?
SASS is more powerful than LESS, and appears to be gaining more market share over LESS. So why did Magento 2 choose LESS? Sorry, a boring pragmatic reason:
- At the time we had to commit to a technology, there were several stable LESS pre-processors available in PHP, but no (stable) PHP implementations for SASS.
This is the most important reason. It is not a question of whether LESS or SASS is more powerful, it is a question of what stable PHP implementations were available when a decision had to be made.
The cool bit is the flow-on benefits of having a pre-processor built directly into Magento.
- By Magento incorporating a CSS pre-processor natively, different phases of the development lifecycle of a site can be supported easily.
- During development, changes to input files are available immediately. You just edit the .less files and Magento looks after the rest. This is great for developers.
- In production, Magento pre-compiles the .less files to produce optimized and cacheable static CSS files. The result is fast CSS with no additional effort.
- Building the pre-processor into Magento means developers do not have to learn how to run LESS (or SASS). You edit the source files and Magento takes care of the rest for you.
- An advanced site is may completely replace the CSS provided by Magento, making the whole topic irrelevant. You can use SASS to generate the CSS files by hand on a site if desired – there is no lock-in to use the CSS provided with Magento. You just wont get the automatic CSS generation happening in developer mode.
- The internal Magento framework has been designed to slot in additional pre-processors, so SASS support can be added later if a stable library does become available. Most LESS files are valid SASS files.
I would not be surprised if some enterprising community member tried to process the Magento supplied .less files using SASS – then developers could use SASS while still leveraging the Magento supplied responsive theme. (Just don’t ask for support from Magento!😉
As can be seen, the Magento selection of LESS over SASS was nothing to do with which was a better technology – it was around availability of quality PHP implementations of the pre-processor. Having the pre-processor available inside PHP has enabled Magento to make it easier to use a pre-processor. You edit files and you are done – no special compilation steps required.
The end result is web developers can simplify the management of their CSS files using this technology making it easier to create and manage high quality sites.
Update 6/23/2014: Looking deeper I think there are enough differences between LESS and SASS syntax that I struck out the text around using the LESS files as SASS directly.