How to use SASS and Compass in Drupal 7 using Sassy
I've recently started using SASS rather than LESS to do
my CSS preprocessing - namely due to its integration with
Compass and it's built-in CSS3 mixins. Here are
three modules that provide the ability to use SASS within Drupal.
Alternatively, you could use a base theme like
Sasson that
includes a SASS compiler.
Download the PHPSass Library
The first thing to do is download the PHPSass library from
GitHub, as this is
a requirement of the Sassy module and we can't enable it without the library.
So, in a Terminal window:
Otherwise, download the each module from it's respective project page and place
it within your sites/all/modules or sites/all/modules/contrib directory.
Configuring the Prepro module
The Prepro module provides various settings that can be changed for each
preprocessor. Go to admin/config/media/prepro to configure the module as
required.
Personally, in development, I'd set caching to 'uncached' and the error
reporting method to 'show on page'. In production, I'd change these to "cached"
and "watchdog" respectively. I'd also set the output style to "compressed",
Adding SASS files into your theme
With this done, you can now add SASS and SCSS files by adding a line like
stylesheets[all][] = css/base.scss in your theme's .info file.
Was this useful?
About me
I'm an Acquia-certified Drupal Triple Expert with 17 years of experience, an open-source software maintainer and Drupal core contributor, public speaker, live streamer, and host of the Beyond Blocks podcast.