Namespace support is being added to Sass

Thank you @nex3 for adding namespaces to Sass!

— The Sass Way™ (@TheSassWay) May 26, 2013

Namespace support has been long-requested by those writing CSS the Sass way. The feature is still in development and should hit a Sass version near you soon enough, but it looks to be a very simple and consistent way of dealing with the vast number of use cases for namespaces.

For a deeper take on the history, read this issue and this comment which summarizes the solution and some of the rejected alternative solutions.

Here’s an example use case shared by Chris Eppstein:

@function current-module() {
  @return nth(&, 1);
}

mymodule {
  @at-root {
    .#{current-module()}-header { ... }
    .#{current-module()}-footer { ... }
    .#{current-module()}-body   {
      a          { ... } 
      span       { ... } 
      p          { ... }
      form       {
        button.#{current-module()}-button { ... } }
    }
  }
}

And this would generate CSS like:

.mymodule-header { ... }
.mymodule-footer { ... }
.mymodule-body a { ... }
.mymodule-body span { ... }
.mymodule-body p { ... }
.mymodule-body form button.mymodule-button { ... }

Check out this Gist and this comment to learn more.