While i was redesigning my website, i discovered Sass. i’m wondering if it’s really more efficient if i use sass instead of just coding the css the old way. i do remember sometimes my stylesheets does become confusing when it gets bigger… I’ll try it for a while and see if i like it or not. Below is the steps I took to get started with Sass & Compass 🙂

Installing Sass on mac

1. applications > utlities > terminal

2. type in “sudo gem install sass“, put in computer password when it asks.

  •   sass -h : list all the commands
  •   sass – -watch styles.scss:styles.css : automatically updates .css file whenever you make a change to .scss.
  •   sass – -style compressed styles.scss:styles.css : Output style. Can be nested (default), compact, compressed, or expanded

Updating to the latest gem on ruby on mac

  1. check which version: gem -v
  2. type in sudo gem update – -system

Compass: css framework, collection of already created styles.

  1. sudo gem install compass
  2. put in password
  3. compass create projectname : it’ll create some folders with .scss files.
  4. compass watch projectname : watching the project folder for updates & updates automatically
  5. compass watch – -output-style=compact
    or :nested, :expanded, :compact, :compressed
  • check compass version: compass version


create _bass.scss file: partial scss for putting variables, mixins, compass imports such as:
@import “compass/reset”,
@import “compass/css3”,
@import “compass/utilities”

Convert Sass to SCSS: sass-convert style.sass style.scss
Convert SCSS to Sass: sass-convert style.scss style.sass

Resource Links:

  • ** – very good video tutorial to get started with Sass & Compass.



With media queries:


Terminal Commands used most often:

ls – lists the directory files
cd – change directory: can drag the folder from desktop to terminal, so “cd folderpath”

Cheatsheet of commands:

Leave a Reply