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:

?

1	gem install compass

Create new project (this command creates a folder and a substructure):

?

1	compass create myproject

After creating project tell the compass to watch the project for changes:

?

1	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:

?

1	@import "compass/css3/border-radius";

Declaring a higher level group gives acces to all child patterns (same as above):

?

1	@import "compass/css3";

Actually using a declared border-radius import:

?

1 2 3

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

The stylesheets get compiled into the stylesheets folder, the compiled css files contain references to scss file lines.

?

1 2 3 4 5 6

/* 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:

?

1 2 3 4 5

@import "compass/reset"; @import "compass/css3"; @import "compass/utilities";   $default-box-shadow-color: red;

Import the base.scss in the custom scss files:

?

1 2 3 4 5 6 7 8 9

@import 'base';   .box {  @include border-radius(5px); }   #myelemid {  @include box-shadow(blue, 1px, 3px, 5px); }

compass and 960

Installation:

?

1	gem install compass-960-plugin

Create new project:

?

1	compass create -r ninesixty my_project960 --using 960

http://compass-style.org/


@msvaljek