Sassy

About this module

Sassy (adj.): Possessing the attitude of someone endowed with an ungodly amount of cool.

This module automatically compiles SASS / SCSS files on your Drupal website. It makes it really easy for you to leverage the power of the advanced CSS syntax that is SASS without you having to worry about parsing or caching of your .scss or .sass stylesheets. The module also includes support for Compass, Bootstrap, and Foundation.

Introductory slides

A quick introduction to SCSS AND SASS

An introduction the SCSS and SASS language, it's features, and a few useful extensions. Designed to be given as a spoken presentation, but serves well as a primer on SCSS and SASS.

Making Drupal Sassy - an overview of Sassy, Prepro, and PHPSass (PDF)

This document covers the installation process and configuration process of Sassy, Prepro, and PHPSass. It also covers how to add a sass/scss file (exactly the same way as regular css files), what errors look like. It goes on to describe how the stack works, and the APIs of Prepro and Sassy with real-world examples.

About Syntactically Awesome Stylesheets (SASS)

Sass makes CSS fun again. Sass is an extension of CSS3, adding nested rules, variables, mixins, selector inheritance, and more. It’s translated to well-formatted, standard CSS using the command line tool or a web-framework plugin.

You can find out more at http://sass-lang.com.

Key features of this module

• Automatic compilation from SASS and SCSS to CSS.
• Works with the Drupal theming system to allow easy use of SASS's features across multiple files. Simply turn on Sassy and all .scss and .sass files will be compiled!
• Provide a way of adding functions for use in your SASS files. This feature is used by the Sassy Substitutions module.
• No external requirements. This can run on almost any server as it uses the PHPSass compiler. (NOTE: rename phpsass-master to simply phpsass)
• Active development of the compiler to bring it in line with the current SASS specification.

What can this do for you?

• With the Sassy module you can deploy a base theme containing your basic page structure and style, mixins, as well as initial variables. In a subtheme, these variables can be changed, allowing you to easily customise any aspect of your CSS such as grid size or colors.
• In a base theme you could also maintain a standard set of mixins which make it easy to add cross-browser rules like rounded borders, drop shadows, transitions, and gradients. You can access any stylesheet from any other stylesheet, by using the machine name of a theme or module: @import "mytheme/mixins";
• By using variables and mixins you will be able to easily keep all the styles consistent across your entire theme without annoying search & replace by just updating your mixins or variables.
• Use the power of Compass or Bootstrap right now, with support for Foundation and other libraries to come.

What to do if you have issues

First update all dependencies - if it's a SASS issue it's probably PHPSass, for Drupal issues it's probably Prepro or Sassy. The PHPSass parser gets updated quite often with small fixes and new features, so updating that is always worth it.

If upgrading to latest didn't fix it, post an issue! We get emails the moment you post an issue and try and fix them as quickly as possible - just make sure to check back on your issue every now and then!

We love getting bug reports, so post them for even small issues or niggles. Suggestions are even more welcome!

Installation Process

This module has 3 requirements to work: Prepro (http://www.drupal.org/project/prepro), Libraries (http://www.drupal.org/project/libraries) and PHPSass (http://github.com/richthegeek/phpsass).

Place Sassy, Prepro, and Libraries in your modules directory (sites/all/modules) and PHPSass(NOTE: rename phpsass-master to simply phpsass) in your libraries directory (sites/all/libraries, create it if it doesn't exist). Enable Sassy and any SASS/SCSS files served by your site should be compiled!

Maintainers

This module is authored by Sebastian Siemssen (fubhy) and Richard Lyon (richthegeek) on behalf of Livelink New Media.