Skip to content

Instantly share code, notes, and snippets.

@chriseppstein
Created May 25, 2013 17:37
Show Gist options
  • Star 62 You must be signed in to star a gist
  • Fork 3 You must be signed in to fork a gist
  • Save chriseppstein/5649985 to your computer and use it in GitHub Desktop.
Save chriseppstein/5649985 to your computer and use it in GitHub Desktop.
mymodule {
@at-root {
.#{&}-header { ... }
.#{&}-footer { ... }
.#{&}-body {
a { ... }
span { ... }
p { ... }
}
}
}
.mymodule-header { ... }
.mymodule-footer { ... }
.mymodule-body a { ... }
.mymodule-body span { ... }
.mymodule-body p { ... }
@chriseppstein
Copy link
Author

Please keep in mind that these feature can be used within mixins that accept content blocks, etc. So an "@include module($name) { ... } " concept could be defined very easily. I think we will quickly find some very nice ways to create useful abstractions with this set of features. And as I have pointed out elsewhere, the @at-root directive and script access for & have benefits beyond just modules.

@DougPuchalski
Copy link

Has there been any discussion to do something more unobtrusive? For me, the value of namespacing comes in when integrating, where it's not possible or edit and maintain the source. For example, bootstrap and foundation both use .table which to me is too generic.

With styles.css:

.table {
  color: red;
}

Then

namespace mymod {
  @import "styles.css";
}

Would compile to

.mymod-table {
  color: red;
}

@Vegasvikk
Copy link

Can someone please give another example of how namespacing might be used--thanks @aceofspades, I just would like to see it in another context.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment