Can I use the ampersand in SASS to reference specific tags with the parent class? [duplicate]
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
.
What you're wanting for would in theory look like this:
.semantic {
ul& {
padding: 0;
margin: 0;
}
p& {
margin: 0;
}
}
This is not possible because the &
must be first. You're just going to have to deal with the fact that it isn't DRY and write it out by hand:
ul.semantic {
padding: 0;
margin: 0;
}
p.semantic {
margin: 0;
}
As of Sass 3.3 or 3.4, it is possible using this syntax:
.semantic {
ul#{&} {
padding: 0;
margin: 0;
}
p#{&} {
margin: 0;
}
}