July 11, 2013

Compass for sass

In my previous article I talked about how to make use of SASS for your front-end development, today I want to talk abit about Compass, http://compass-style.org/

Compass is an addon to SASS which allows developers easily write CSS3 codes in sass, which means you @include once of compass mixin, compass will compile all css3 prefix for you.

Here is an example:

and what happends if you compile with compass it will automatic provide with the prefix as below.

it might not be ovious if you are writing a few line of codes only, but for those web applicaitions of content heavy websites, this is great way to build rapid css without worries.

How do you install Compass?
bring up your terminal type in
[cc lang="php"]gem install compass
isn't that easy, if you have not been using terminal before please follow my previous tutorial about SASS.

In order to create an compass project you need to use compass command to create a new project, bring up your terminal, cd to your a folder, and type in
[cc lang="php"]compass create your-project-name
this will create 2 folder and a config.rb file which if you open it up, you will be able to configure the settings of your directory structure, such as if image folder is called img, then change to img.
[cc lang="rb"]
http_path = "/"
css_dir = "stylesheets"
sass_dir = "sass"
images_dir = "img" // I am using img as image directory
javascripts_dir = "javascripts"

and if you notice that compass has automatically created 3 scss file in sass directory, these are the file that you will write your SASS scripts like what I discuss in my previous S" title="sass" target="_blank">SASS section
well you can read more about compass about their mixin (functions) that you can @include.
One more than before you @include any compass mixins you need to call the compass first by doing

lastly, compile them using
[cc lang="php"]compass compile your-project-name