Working with WooCommerce and Sass

Written by - Published on

As a recent Sass convert this year, I was delighted to learn recently that WooCommerce are not only working on official support for Sass, but you can start using it today.

WooCommerce’s front-end CSS files by default are currently compiled with Less, another popular CSS pre-processor and alternate to Sass. As a front-end developer you have a couple of options for working with these CSS files in order to customise your theme. Whether you wish to use Sass, Less or standard CSS, WooCommerce themselves recommend the following options:

  • Remove their Stylesheets Entirely (See Below), or
  • Overwrite their styles with your own stylesheet, or
  • Copy the WooCommerce CSS folder into your theme and work directly with the Less/CSS files

Step 1 – Disable the WooCommerce Stylesheets

To begin using Sass for your WooCommerce theme, you can simply dequeue (disable) the WooCommerce stylesheets altogether by adding either of the following code snippets below to your theme’s functions.php file:

Step 2 – Adding WooCommerce Sass

WooThemes developer Claudio Sanches has been working on official Sass support for WooCommerce for over seven months. Claudio has conveniently converted all of WooCommerce’s styles into a simple Sass repository that is available over on GitHib.

You can either upload and enqueue WooCommerce Sass in its entirety or like me, merge Claudio’s Base, Mixins and variables into your theme’s Sass files.

WooCommerce are dropping Less for Sass

Having exchanged a few tweets with Claudio over twitter, he also suggested that WooCommerce will soon be dropping Less and switching to Sass permanently:

You can follow Claudio’s Less to Sass Pull Request over on GitHib.

After last month’s release of Magento CE 1.9, which included a Sass based Responsive Theme, it’s great to see that WooCommerce will also be fully supporting Sass.