Drupal Association members fund grants that make connections all over the world.
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.
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.
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:
- 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!
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!
- Maintenance status: Actively maintained
- Development status: Maintenance fixes only
- Module categories: Developer, Theme Enhancements, Third-party Integration, Utility
- Reported installs: 2,104 sites currently report using this module. View usage statistics.
- Downloads: 20,066
- Automated tests: Enabled
- Last modified: December 31, 2015
- Stable releases are covered by the security advisory policy.
Look for the shield icon below.