Sass Compass Setup in SilverStripe

Ruby Setup

  1. Download and install Ruby
    Note: Sass is a Ruby Gem so this is required.
    Important: When installing, make sure you check "Add Ruby executables to your PATH"

Sass Setup

  1. Open command line and install Sass
    gem install sass
  2. Change to directory where Sass source file is (.scss) and watch file changes by specifying source and destination files
    Note: You may also specify source and destination directories (scss:css).
    sass --watch style.scss:style.css

Compass Setup

  1. Open command line and install Compass
    gem install compass
  2. Setup Compass project
    compass create gwennie --syntax sass

Setup Sass and Compass

  1. Download Compass Boilerplate
    Copy the compass folder (~/compass-demo/assets/compass/) into site themes folder (~/siteName/themes/yourTheme/).
  2. Go to the Compass folder and watch compass folder
    cd ~/themes/yourTheme/compass/
    compass watch
  3. Test change in styles sass file are being watched ( ~/themes/yourTheme/compass/sass/style.scss).
    The result should be rendered in ( ~/themes/yourTheme/css/style.css).
  4. Rename the sass file to your themes name
    E.g.  ~/themes/yourTheme/compass/sass/yourTheme.scss, again the rendered CSS should appear in ( ~/themes/yourTheme/css/yourTheme.css).
  5. Create a Sass partials folder
    To import into your newly created Sass file.
    See recommended Sass Structure
    Also checkout Compass Features.

Compass Sprite Generation Setup

  1. Create a directory for your sprite images
  2. Import and include images in base partial
    ~\themes\yourTheme\compass\sass\yourTheme.scss
    Note: You mustn’t use hyphens in your sprite folder name, Windows doesn’t like it!
    // Compass Sprites
    @import "compass/utilities/sprites";
    $gwennie-sprite-dimensions: true; // Generate sprite width/height
    @import "gwennie/*.png";
    @include all-gwennie-sprites;
    
    This will produce the following CSS
    .yourtheme-sprite, .yourtheme-firstimage {
     background-image: url('../imagesyourtheme-sc78bc8776c.png');
     background-repeat: no-repeat;
    }
    .yourtheme-firstimage {
     background-position: 0 0;
    }
    
  3. Apply the my-yourtheme-XXX classes to your markup as needed.

Reference
http://thesassway.com/beginner/how-to-structure-a-sass-project
http://compass-style.org/help/tutorials/spriting/