Nested Styles with Ruby and FrontCompiler

Nested styles is a feature which some people dream about for quite a long time. The idea is pretty simple and beautiful.

Say you have got some css like that.

div.article div.title {
  font-weight: bold;
}
div.article div.title a.author {
  padding-left: 12px;
  background: url('user.png') no-repeat left;
}
div.article div.text {
  border: 1px solid #EEE;
  background: #FEF;
}

And now imagine that you could write it with nested constructions like that.

div.article {
  div.title {
    font-weight: bold;
    
    a.author {
      padding-left: 12px;
      background: url('user.png') no-repeat left;
    }
  }
  div.text {
    border: 1px solid #EEE;
    background: #FEF;
  }
}

See the difference? How much more simple, clean and DRYish your css could be! Unfortunately current browsers don't support such things. At lest not yet.

So, does anybody want to sit down and wait for the future coming?

No, say 'no', you don't need tell such terrible things, because we have added the feature emulation in the FrontCompiler project. Which is a JavaScript/CSS/HTML processor written in Ruby and which can be used as a Rails plugin.

From now one, each time when you process a css file with FrontCompiler, it will automatically convert your nested styles in the way browsers can understand. So you can easily and safe use the nested styles advantages.

Have fun!