Friday, May 22, 2015


7:27 AM Posted by Anuradha Welivita 1 comment
What is Compass? 

Compass is an open source css authoring framework. It adds useful mixins to sass. Compass is very much popular because of its ease and usefulness in creating styles for web based applications.


Installing Compass in your machine is really simple. Just need to type the following commands in the command line if you are using windows or on the terminal if you are using Linux.

For installing you need to have ruby gems installed in your machine. As we discussed about installation of Ruby and Sass in the previous blog post, now let's just install Compass.

sudo gem install compass

After that all you need to do is create a compass project in your theme directory with the following command.

compass create nameofyourtheme

Like we did with Sass we may need to start watching the Compass project and hence type the commands:

nameofyourtheme$ compass watch

Then you will be able to view something like the following.

>>> Compass is watching for changes. Press Ctrl-C to Stop.
    write stylesheets/ie.css
    write stylesheets/print.css
    write stylesheets/screen.css

Now you are all ready to start coding.:)

Coding with Compass

Inside the theme of the Compass project we created we can see
  • sass directory
  • stylesheets directory
  • .sass-cache directory
  • config.rb file

Yeah you guessed right! :) It's inside the sass directory that we should be placing our scss files and the corresponding css files will be placed inside the stylesheets directory.

Type something in the screen.scss file inside the sass directory and hit save. Then you will be able to see the corresponding changes in the screen.css file the stylesheets directory.

Inside the screen.scss file you will have something like

/* Welcome to Compass.
 * In this file you should write your main styles. (or centralize your imports)
 * Import this file using the following HTML or equivalent:
 * <link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" /> */
@import "compass/reset";

Also add the following line to it.

@import "compass";

By adding this we will be access many of the awesome mixins provided by Compass.

For example: 

@include float-right;

is a cross browser compatible float-right command.


$test_color: #ccc;
color: shade($test_color, 30%);

is a Compass color mixin.


@include text-shadow(0 2px 2px rgba(#000,0.3));

 is a mixin for applying text shadow and rgbs() is again a Sass mixin.

All of the Compass mixins that you might want will be here. Learning all of these might take sometime yet after learnt all these will make your work much more easier than using native css.

1 comment:

  1. All about Inkscape lessons