Play With SASS Using Compass

Once you finished with the installation of Ruby Germs and Sass on your system, install compass in the next step. If you've not yet installed Ruby Germs and Sass on your system, please refer my following blog for installation:

Install SASS on Windows Using Ruby Gems

Now we are going to install Compass.

Open command prompt (CMD) and type the following command.



It will install Compass on your system. You will get the following message after installation of Compass.



Next we are going to install css parser.



It gives a count of the Sass rules, properties, mixins defined and mixins used as well as the CSS rules and properties that get output from your Sass-stylesheets.

After installation, it will give you the following message:



Now we are going to create one sample project.

You can create project using the following command:



After creation of project, you will get the following message.



In the next step, you have to compile Sass to css. So for that purpose, you have to add watch as in the following screenshot:



Once the watch is started, you will get the following message.



This kind of folder Structure is created once you create project.


Now, we are writing some Sass code and will send its impact on css file using Compass.

I use Atom Editor (Open Source) for making this project. You can even use Notepad++, Sublime Text, etc for developing project.

You will see config.rb file in your project.



You can see all the references to the different directories Compass will need in order to compile your CSS.

Now I am going to write some Sass code in screen.scss file.



After saving the complete code, changes will be reflected to css file as well as on command prompt. This could happen because of Compass.

style.css looks like the following:





I hope this quick tutorial made your Compass working environment possible.