Compass is a CSS Authoring Framework with a lot of reusable patterns. Developers spend less time on browser prefixes, css2 opacity, browser checking, IE hacks, reset stylesheets and so on...


   gem install compass
Create new project (this command creates a folder and a substructure):
   compass create myproject
After creating project tell the compass to watch the project for changes:
   compass watch myproject

Pattern usage

In order to find out available constructs in the framework use compass documentation

Before using any compass patterns, we have to declare them:

   @import "compass/css3/border-radius";
Declaring a higher level group gives acces to all child patterns (same as above):
   @import "compass/css3";
Actually using a declared border-radius import:
   .box {
    @include border-radius(5px);
The stylesheets get compiled into the stylesheets folder, the compiled css files contain references to scss file lines.
   /* line 8, ../sass/screen.scss */
   #elem {
     -webkit-box-shadow: red, 2px, 5px, 10px;
     -moz-box-shadow: red, 2px, 5px, 10px;
     box-shadow: red, 2px, 5px, 10px;

Best practice

Best practice is to make base.scss with includes, global variables and pattern variable overrides:

   @import "compass/reset";
   @import "compass/css3";
   @import "compass/utilities";

   $default-box-shadow-color: red;

Import the base.scss in the custom scss files:

   @import 'base';

   .box {
    @include border-radius(5px);

   #myelemid {
    @include box-shadow(blue, 1px, 3px, 5px);

compass and 960


   gem install compass-960-plugin
Create new project:
   compass create -r ninesixty my_project960 --using 960



No comments: