Introduction of SCSS and Compass

Recently, the CSS tool like SCSS,SASS and less have become more popular.
Those framework provide several extra functionality to CSS, also with build in compress option.
take SCSS as example:

install scss using ruby gem:

gem install sass
    sass style.scss style.css 
    sass [INPUT] [OUTPUT]

functions

1. Nesting class

#css{
     padding:5px;
     .tool{
          padding-top:10px;
     }
     //parent reference
     &:hover{
          background-color:#FFF;
     }
}

2.Variables
you can use dollar sign as variable mark in SCSS:

$mid-padding : 5px;

#css{
     padding : $mid-padding;
}

3. Mixins
Mixins means module inheritance in Ruby. It's just like inheritance from abstract class in SCSS. Use @ sign for declare maxin and include in css class.

@mixin block-base($margin){
     margin:$margin;
     padding:$padding;
}

#block{
     @include block-base(10px);
}

4. Inheritance
Also you can use @extend to inheritance from other CSS class.

.error{
     color:#F43;
}

.big-error{
     @extend .error
     font-size: 22px;
}

5. import
Import can let you include library and mixins into current css file, like compass will have lots of library to import.

@import "compass/css3/border-radius";
@import "compass/utilities/general/clearfix";

Compass

Compass is another framework that integrate SCSS and CSS grid framework like blueprint,
that provide you build in CSS layout, ie hack and other support. Compass is well integrated with rails.

using compass:

gem install compass
    compass init (under rails directory)

will create directory in app/stylesheets

compass compile

can compile into public/stylesheets directory

more reference for compass library