How to start using SASS AND COMPASS in 10 minutes
By Mahtab Alam
Feb 28, 2015 10:16

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"


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

c:\> gem sources


If not, then you can add source as

c:\> gem sources --add

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

c:\> gem install compass

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


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 .

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

Create a file and add some SASS code like

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.



Add new comment

Contact Us