How To Use SASS Instead of LESS in Magento 2

September 12, 2018

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.

themes.json structure

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

Example themes.json

{
"blank": {
"src": "vendor/snowdog/theme-blank-sass",
"dest": "pub/static/frontend/Snowdog/blank",
"locale": ["en_US"],
"postcss": ["plugins.autoprefixer()"],
"ignore": [".test"]
}
}

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 styles

Useful commands

gulp clean remove static content in the / pub / static folder gulp dev launch browserSync, babel, styles, watch tasks

Notes

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.