CSS Preprocessors

When you have a simple blog or a small site, it is enough to use just css and html to make your pages look good, but if you have a big service with thousands of css lines of code that would be not enought, as you need to provide more sections, pages and even have a few mirrors of your projgect.

In this case you have to provide more and more css codes, which can't be configurated or reused as much as you want. Sometimes you have to reuse some templates and change different files in order to make a minor change.

One of the helpers which i can offer for a big brogect or just for developers, who want to write smart and reusible code, is to use css preprocessors languages. Most of them offer such featuress, which can help to write smarter and create complexed web sites.

Here are basic opportunities of this languages, i'll use SASS language to show how it works

1 Variables 
$column-width: 60px;
.column {
   width: $column-width;
}
Output css:
.column {
  width:60px;
}

2 Inheritance

@mixin rounded-borders {

  border-radius:4px;;
}
.box {
@extend rounded-borders;
  color:#000;
}
Output css:
.box {
  border-radius:4px;
  color:#000;
}

3 Mixins
@mixin rounded-borders($deg) {
  border-radius:$deg
}
.box { 
  @include rounded-borders(10px) 
}
Output css:
.box {
  border-radius:10px;
}


There are top 3 tools which are offered: 

• Less - http://lesscss.org/ (nested blocks, logic, constants)
• Saas - http://sass-lang.com/ (same)
• Compass - http://compass-style.org/ (same + sprites management)

For Debitoor - it would be nice to have UI guidlines as constants in one place to customize ous css, use more structural and logical css with math functions, variables, autogenerated sprites, and other usefull options