I am having trouble with nesting in Sass. Say I have the following HTML:
<p href="#" class="item">Text</p>
<p href="#" class="item">Text</p>
<a href="#" class="item">Link</a>
When I try to nest my styles in the following I get a compiling error:
.item {
color: black;
a& {
color:blue;
}
}
How do I reference a type selector before the parent selector when it is part of the same element?
Best Answer
As Kumar points out, this has been possible since Sass
3.3.0.rc.1 (Maptastic Maple)
.We can combine the
@at-root
directive along with interpolation#{}
to arrive at the intended outcome.SASS
Output CSS