How To Use SASS Instead of LESS in Magento 2

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. fronttools

How to install SASS Theme and Fronttools

  1. Run composer require snowdog / frontools
  2. Go to the folder (your Magento 2 project) cd vendor / snowdog / frontools
  3. Run yarn or npm install
  4. 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
  5. 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


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.
Other Articles

The Power of Social Commerce: Real-Life Case Studies

As an ecommerce business owner, I've always been intrigued by the power of social media and its potential to boost sales. Social commerce, the integration of social media and ecommerce, has emerged as a game-changer in the industry. It allows businesses to reach and engage with their target audience on

Read more

2024 Sustainable eCommerce Growth: Key Trends Shaping Eco-Friendly Online Shopping

‍‍ In recent years, the concept of sustainability has become increasingly important in various industries, and e-commerce is no exception. Sustainable e-commerce refers to the practice of conducting online business operations in an environmentally friendly and socially responsible manner. This article will delve into the emerging trends in sustainable e-commerce, highlighting

Read more
Beyond Code – We Build Experiences: Dive Into a Realm Where Every Line of Code Crafts a Story

We don't just code; we breathe life into your digital aspirations. Our expertise in coding is complemented by our design approach and strategic marketing initiatives, ensuring your brand not only looks good but performs exceptionally.

Begin Your Story