Simple and quick installation of SASS

I hear you it seems there is no straight forward method of installing and using SASS! No wonder why a lot of people opt for LESS.

Anyhoo straight forward instructions here:

  1. Install Ruby = http://rubyforge.org/frs/download.php/76955/rubyinstaller-2.0.0-p195.exe
  2. Start command prompt with ruby
  3. Type and run gem install compass (Warning it takes a few seconds to kick in)
  4. Type and run gem install css_parser
  5. Type and run compass create sass-test. This will create the folder we want to work with. This folder will most probably create a folder called "sass-test" in your windows user folder.
  6. Change the path to the newly created folder cd sass-test
  7. Now here is the key information. SASS runs like a generator which automcatically listens to the "sass-test" folder. Each time you make a change in the sub folder "sass" it will automatically create the css file into the sub folder "stylesheets". It will use the same filename you put into the "sass" folder. The command prompt needs to be open all the time to work as a generator.
  8. To test, copy one of the existing sass files in the sass folder and rename it to something like "andrew.scss". Edit it and copy the following contents in and save:

    // Variable Definitions

    $page-width: 800px;
    $sidebar-width: 200px;
    $primary-color: #eeeeee;

    // Global Attributes

    body {
    font: {
    family: sans-serif;
    size: 30em;
    weight: bold;
    }
    }

    // Scoped Styles

    #contents {
    width: $page-width;
    #sidebar {
    float: right;
    width: $sidebar-width;
    }
    #main {
    width: $page-width - $sidebar-width;
    background: $primary-color;
    h2 { color: blue; }
    }
    }

    #footer {
    height: 200px;
    }

  9. Go to the "stylesheets" folder and see the generated css file called "andrew.css"
  10. If you close down and want to start the generator again you have to: cd sass-test to the directory again. And then compass watch.
 

Like It? Share It!

 

Leave a comment

 

Need help with this article?

Have you got a suggestion, compliment or need additional help with this article? Simply contact me at ajfhoward[@t]hotmail.com and I'll try to help as much as I can.