How To Use SASS Instead of LESS in Magento 2
The online store on Magento 2 in the out-of-the-box version by default supports only LESS – CSS preprocessor – the dynamic style language that Alexis Sellier developed. It was created under the influence of the SASS language and in its turn, it influenced the new syntax SCSS, which also uses syntax that is an extension and does not support SASS.
What’s The Purpose of Using SASS in Magento 2?
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 the technology, there were some stable LESS pre-processors available in PHP, but no (stable) PHP implementations for SASS.
Alan Kent (eBay Search VP, M2 product technical lead)
In other words, this means that in view of the limited time to study or search for a stable implementation of SASS in PHP, it was decided to use LESS.
SASS is quite popular among the front-end developers and not only and if you (like me) are accustomed to using it, then below is the instruction how to integrate the CSS preprocessor into the project on Magento 2.
Less to Sass Community Project is officially supported by Magento, and Theme Blank SASS – the result of this project – is an empty Magento 2 theme (ready for release), transformed into SASS.
Together with the accompanying Fronttools package, you get development tools and an extensible blank theme based on SASS, so that you have the opportunity to develop your own theme.
How to install SASS Theme and Fronttools
- Run composer require snowdog / frontools
- Go to the folder (your Magento 2 project) cd vendor / snowdog / frontools
- Run yarn or npm install
- You need to decide where you want to save the configuration files, in the fronttools package folder or at another location dev / tools / frontools / config. Run gulp setup (in the same vendor / snowdog / frontools folder) to automatically copy the test config files to the dev / tools / frontools / config folder, and a symlink to the main folder will be created to make it easier for you to search for your config files
- Definition / description of your theme in the settings file – themes.json.
- src – full path to the subject
- dest – full path to static files pub/static/[theme_area]/[theme_vendor]/[theme_name]
- locale – array of available locales
- parent – name of the parent theme
- stylesDir – (default styles) path to the folder with styles. By default, Magento 2 uses web/css
- disableSuffix – turn off the addition of the .min suffix using the -prod flag.
- postcss – (by default [“plugins.autoprefixer ()”]) an array is used to transfer / use plug-ins
- modules – the list of modules that you want to use to generate a map in your theme
- ignore – array – patterns, ignore list
Compiling SASS in CSS
Run the command inside the folder /tools/ of your project, if the folder has not already been created, then the command
gulp setup in the folder /vendor/ snowdog/frontools/
gulp clean remove static content in the / pub / static folder
gulp dev launch browserSync, babel, styles, watch tasks
Buying modules for Magento that have HTML templates and styles / markup, you will spend additional tools – time for adapting styles, because, by default, all modules that have HTML elements and markup for them are developed under the Luma theme, which in turn is developed on Less. But if your store uses an original theme, you constantly follow the updates on the site, then even if you use the theme in Less, you will 100% invest in adapting the styles of the purchased module.