
CSS has a serious maintainability problem: stylesheets usually contain a lot of duplicate code because CSS rules are not declared in a modular way. Traditional object-oriented programming allows inheritance or composition to keep code as DRY as possible but neither mechanism is part of the CSS standard.
Enter SASS and LESS, two CSS compilers which solve this problem. Both work by providing a custom .sass/.less file which compiles into .css. The custom syntax provides a very useful set of functionality:
- Nested Rules – avoid duplicate declarations
- Variables – use a variable (“header_bg”), rather than a hard-coded constant (“#04B45F”) in your CSS rules
- Math – calculate CSS values based on variables and formulas
- Mixins – add CSS rules in bulk with a single line
You have your application’s deployment tool compile the CSS source to a static .css file upon deployment (or, simpler, check the generated file into source control).
The SASS and LESS websites do a better job than I can in explaining the functionality in depth. Personally I prefer LESS because its syntax is a little more like Ruby but that’s splitting hairs; both will make your CSS much more maintainable.