On Sass 3.4:
.semantic {
@at-root {
ul#{&} {
padding: 0;
margin: 0;
}
p#{&} {
margin: 0;
}
}
}
Generates:
ul.semantic {
padding: 0;
margin: 0;
}
p.semantic {
margin: 0;
}
@at-root moves the block to the top-level. This has several uses (see link) but here it's being used to keep take advantage of the &
syntax without implying that the rules are child selectors of .semantic
.