Skip to main content

Sass & Compass Watch

  • Updated

Syntactically Awesome Style Sheets (Sass) in MODX Cloud

Sass is available by opening a support ticket from your MODX Cloud Dashboard and providing the first part of your internal MODX Cloud username, e.g., c9876.paas1.tx.

Setting up a New Sass Project

Assume the following goal: You want to use Sass in your MODX site to make developing and managing CSS simpler. The Sass project will be located in assets/sass/ (inside your web root folder), and will compile CSS into assets/css/.

  1. SSH into your Cloud using the credentials provided in your MODX Cloud Dashboard.

  2. Switch to your assets directory for your project:

    cd www/assets/

  3. Set up your Compass project for SCSS:

    compass create . --javascripts-dir="js" --images-dir="img" --css-dir="css"

  4. Optionally, install Bourbon, a really handy Sass mixin helper library, inside your sass directory:

    cd sass; bourbon install

    If you want to add Neat, an handy grid mixin helper library from the makers of Bourbon:

    gem install neat; neat install

  5. Back out one level so you’re in your assets directory: cd ..

  6. Upon completing your configuration, enter the following command to start watching your Sass files for change:

    compass watch

Any .scss or .sass file in the sass directory gets automagically converted into CSS for you inside the css directory. Watch the command line from time-to-time to catch any errors that may crop up. When you close the terminal, your Compass should exit and cease watching your sass directory for changes.

Starting Compass Watch on a Sass Project

To continue working later, restarting Compass Watch is straightforward:

  1. SSH into your Cloud using the credentials provided in your MODX Cloud Dashboard.

  2. Start watch your Sass files for changes:

    cd www/assets/; compass watch

Learning More About Sass

Here are some additional resources to help you learn to become one with Sass:

  • The beginner intro to Sass helps explain what Sass is, and the basics of how to use it.
  • Bourbon explained, does just that: helps you understand a really awsome collection of super-useful mixins to automate your Sass projects.
  • Bourbon’s helpful grid companion project, Neat, helps you build custom CSS grids without the extra bloat of full grid frameworks like Bootstrap and Foundation.

Related articles