Using skins like a pro by using Sass and compass

Native CSS is very static and doesn't provide much flexibility, that's why ADF skinning provided aliases, -tr-property-ref and -tr-rule-ref to make loading dynamic properties easier. However, even when you create an enterprise application with multiple components, you end up with a very big CSS file, which is very hard to maintain.

Sass is meant to help you fix this problem. It is considered the most mature and powerful CSS extension language. It is a scripting language that is interpreted into CSS. It embraces the DRY method to the fullest so that you won't have to write any redundant styles. It also makes the maintaining process of CSS much easier.

Sass provides so many features such as variables, mixin (a group of CSS styles that you want to reuse as whole, which can be parameterized), functions, and even mathematical calculations and loops so that you have a very tidy and small CSS, for instance, a syntax like the following:

$blue: #3bbfce...