Upload Image
SASS AND COMPASS in 10 minutes

Before starting with SASS AND COMPASS you need to have Ruby gems so you'll need to have Ruby on your machine.

If not then download Ruby.

After completion of Ruby you will get a "command prompt with Ruby". So "Start Command Prompt with Ruby"

command prompt ruby_0 image


step -: Check if you have "http://rubygems.org/" as a source to find gems or not.

c:\> gem sources



If not, then you can add source as

c:\> gem sources --add http://rubygems.org/

Step -: After source is added. you are ready to install compass on your machine.

c:\> gem install compass

Gem command image

Step -: You can also install css_parser to take all the features of compass stats which outputs statistics of Sass stylesheets.

c:\> gem install css_parser

Css parser image


Now Time to play with SASS

step:1 Create a project with name “sass_project”

Create a folder(Directory) where you play with SASS coding and compiling it to generate respective CSS files.

D:\> md sass_project

D:\> cd sass_project

Here I created a folder(directory) at at location D:\>. You can choose your once.

Step 2: Now create separate directory in “sass_project”

Create two folder(Directory) in "sass_project" for storing your .sass file and .css file separately .

For SASS file create directory with name “sass”  and for CSS file created directory with name “stylesheets”.

Step 3: Create RB File with name "config.rb" in "sass_project"

This RB File contains the information about SASS Folder and CSS Folder.

You can also add information about Image folder,  Javascripts folder as per your requirement .

Config rb image

Step 4: Create a file inside SASS folder name "my_sass.scss"

Create a file and add some SASS code like

My sass image

Step 5: Compile the SASS File

Now you can compile the sass file to generate it's respective css file in the folder(Directory) "stylesheets"

Go to your project folder(Directory) in "Command Prompt with Ruby" and compile your sass file as

D:\> cd sass_project

D:\sass_project>compass compile sass\my_sass.scss

After compilation is done , it will automatically create a css file with name "my_sass.css" in "stylesheets" directory.

My sass css image