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

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

A Guide to Optimizing Your Magento Store for Peak Performance

Why Does Magento Speed Matter? As an online retailer, the speed of your Magento store is crucial to your success. In today's fast-paced digital world, users have high expectations when it comes to website performance. If your Magento store is slow, it can have a significant impact on user experience

Read more

BigCommerce B2B Edition: A Guide to Scaling Your Online Presence

In today's digital age, moving your business online is no longer an option, but a necessity. However, making that transition can be challenging, especially for B2B businesses. Fortunately, there are platforms like BigCommerce B2B Edition that can help you overcome these challenges and unlock the true potential of your online

Read more

7 Top Magento Payment Gateways in 2024

What is a payment gateway? A payment gateway is an essential component of any e-commerce platform, including Magento. It acts as an intermediary between the customer and the merchant, securely transmitting payment data during online transactions. When a customer makes a purchase on a Magento website, the payment gateway encrypts

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