Quick start for SCSS (SASS) to Drupal using the Sassy module

SASS/SCSS has long become the standard for writing CSS code. If you're not using it yet, it's time to consider switching. You can quickly integrate SCSS in Drupal using the Sassy module—even on shared hosting, since the CSS files will be compiled using a PHP library.

Getting Started

I'm starting with a clean Drupal install and the Zen theme. First, install the Sassy module:

https://www.drupal.org/project/sassy

Sassy requires the Prepro module to handle compilation:

https://www.drupal.org/project/prepro

Also install the Libraries API module to load the Sass compiler library:

https://www.drupal.org/project/libraries

Download the PHPSass library (SCSS-to-CSS compiler):

https://github.com/richthegeek/phpsass

Place it in sites/all/libraries/phpsass so the structure looks like this:

• /sites/all/libraries/phpsass/SassLoader.php
• /sites/all/libraries/phpsass/SassParser.php

Enable the Sassy, Prepro, and Libraries modules. Then in your subtheme (mine is sitemade), open the sitemade.info file and add the SCSS stylesheet:

stylesheets[all][] = css/styles.scss

Create the file css/styles.scss, clear the Drupal cache, and it should now compile and work automatically.

If you encounter issues, check permissions on the files folder (should be writable) and review the Status Report.

Sassy Module Functionality

Sassy compiles your .scss files into CSS and Prepro stores the output in:

sites/default/files/prepro

To avoid regenerating CSS on every page load (important for live sites), go to:

/admin/config/media/prepro and enable caching.

Debugging with Firebug + FireSass

With the FireSass plugin for Firebug, you can trace compiled CSS back to its original SCSS source line. Enable this in Prepro settings:

✓ Pass @warn and @debug to Watchdog
✓ Include debug information in output

SCSS Features

Explore more on the official website:

http://sass-lang.com/

Nesting

#menu-1 {
  margin-top: 20px;

  ul {
    margin-left: 0;

    li {
      width: 100px;
      display: inline-block;

      a {
        text-decoration: none;

        span {
          padding-left: 10px;
          background: url(../images/icon.png) left 3px no-repeat;
        }
      }
    }

    .li-1 {
      background: red;
    }
  }
}

This is more readable and maintainable than traditional CSS:

#menu-1 { margin-top: 20px; }
#menu-1 ul { margin-left: 0; }
#menu-1 ul li { width: 100px; display: inline-block; }
#menu-1 ul li a { text-decoration: none; }
#menu-1 ul li a span { padding-left: 10px; background: url(../images/icon.png) left 3px no-repeat; }
#menu-1 ul .li-1 { background: red; }

Parent Reference &

a {
  font-weight: bold;
  text-decoration: none;

  &:hover {
    text-decoration: underline;
  }

  body.firefox & {
    font-weight: normal;
  }
}

Variables

$red: #fa0a0a;
$blue: #0a0afa;
$sidebar: 250px;

.sidebar {
  width: $sidebar;
  background: $red;
}

.content {
  margin-left: $sidebar;
  background: $blue;
}

Mixins (Functions)

@mixin blue-button {
  background: #3498db;
  background-image: linear-gradient(to bottom, #3498db, #2980b9);
  border-radius: 28px;
  font-family: Arial;
  color: #fff;
  font-size: 20px;
  padding: 10px 20px;
  text-decoration: none;

  &:hover {
    background: #3cb0fd;
    background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
  }
}

.form-submit {
  @include blue-button;
}