Dynamically create nested CSS

Question

I want to create a kind of 'scope' in CSS, so that all the CSS in a particular style tag does only effect a specific html node.

Simpler: I want something like this:

<style id="style1">
  .foo { color: red; }
  .bar { color: green; }
</style>
<style id="style2">
  .dor { color: blue; }
</style>

dynamically turn into something like this:

<style id="style1">
  #scope1 .foo { color: red; }
  #scope1 .bar { color: green; }
</style>
<style id="style2">
  .dor { color: blue; }
</style>

With PHP or JavaScript (preferably using jQuery)

Is there a simple way of doing this?

Answer 1

I don't know of anything that would do that specifically, but I would suggest looking into sass/scss . It provides a similar way of nesting css (and much more)

eg.

#style1 {
  .foo {
    color: red;
  }
  .bar {
    color: green;
  }
}
#style2 {
  .dor { color: blue; }
}