Namespace support is being added to Sass

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.

News Films

Our little film studio focuses on telling developer-centric stories that need to be seen.

Beyond Code: Season 3 / GopherCon 2015

 
0:00 / 0:00