Intro to Compass and SASS

There are many open source frameworks that are released to make theming simpler. One of the problems that themers / front-end developers usually face is the amount of CSS3 features that many want to use, but not all of the different browsers has the capability of getting it working correctly. Therefore, CSS preprocessors like Compass and SASS makes this possible by having predefined mixins, variables, rules and inheritance that are similar to the concepts of Object Oriented Programming.

With the addition of SASS, CSS block styling are treated like functions in programming.

• We can define variables that have a specific value that can be used throughout the site. Instead of figuring out what the color for a tag/block/section was, why not create a variable to better remember that color? For example: $blogColor = #FFF9E2; . Isn’t $blogColor easier to remember than the color code?
• Mixins are a way to combine traits/variables for a particular part of your site. Combine CSS styling in a mixin and if that styling is used by multiple selectors, all you need to do is call the mixin with: @include mixinName;
• To follow the concept of inheritance in OOP, SASS allows mixins to inherit/borrow styles from its parent mixin without retyping everything again. This saves a lot of theming time.
• Make sure to read the tutorials for Compass and SASS for more useful info.

Now to actually get these two frameworks working with Drupal or WordPress, here are the steps:

1. Make sure Ruby is installed on your server (MAMP or WAMP).
2. Then in the command line, type gem install compass.
3. In Drupal, cd to the main themes directory for your project.
   • Usually located at /sites/all/themes/projectName/
   • From there, type: compass create projectName
   • This creates a projectName directory with a config.rb file, a sass and stylesheets directory and files.
   • If you are using a subtheme like Omega, and want to keep every stylesheet in the global.css, change the path on the config.rb from stylesheets to css and make sure that all changes to the .scss files are reflected in the .css files located in the css directory.
   • Run Compass: compass watch /path/to/your/themes/directory/. Start adding styles to the .scss files.
4. In WordPress, the steps are mostly the same as above, except:
   • cd to the child-theme directory at /wp-content/themes/project-child and then type: compass create projectName
   • Move or change the path inside the config.rb file to match your setup.
5. To make theming even simpler the next time you continue, instead of typing up the entire path to run compass, add:alias projectName='compass watch /path/to/your/themes/directory/'
   

   in your .bash_profile so that all you will need to do is type projectName in the command line and it will automatically run compass for that project.

   
   
6. Once you’ve setup Compass, you don’t need to setup SASS because it’s already included with it.