Ext JS 4 has a brand new theming system to customize the look of your application while still supporting all browsers.

A Brief Introduction to SASS & Compass

SASS is a pre-processor which adds new syntax to CSS allowing for things like variables, mixins, nesting, and math/color functions. For example, in SASS we can write:

?

$blue: #3bbfce;
$margin: 16px;
?
.content-navigation {
    border-color: $blue;
    color: darken($blue, 9%);
}
?
.border {
    padding: $margin / 2;
    margin: $margin / 2;
    border-color: $blue;
}

And it will compile to:

.content-navigation {
    border-color: #3bbfce;
    color: #2b9eab;
}
?
.border {
    padding: 8px;
    margin: 8px;
    border-color: #3bbfce;
}

To see the wide variety of other features available in SASS, please see http://sass-lang.com/. Compass extends SASS by adding a variety of CSS3 mixins and providing the extension system that Ext JS leverages. With Compass, one can include rules like:

$boxheight: 10em;
?
.mybox {
    @include border-radius($boxheight/4);
}

Which compiles into:

.mybox {
    -webkit-border-radius: 2.5em;
    -moz-border-radius: 2.5em;
    -o-border-radius: 2.5em;
    -ms