compass

Introduction

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...

Installation:

   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

Installation:

   gem install compass-960-plugin

Create new project:

   compass create -r ninesixty my_project960 --using 960

http://compass-style.org/


@msvaljek