Is there a way in Sass to use the ampersand to select the immediate parent, rather than the parent selector of the entire group? For example:
.wrapper{
background-color: $colour_nav_bg;
h1{
color: $colour_inactive;
.active &{
color: red;
}
}
}
compiles to:
.wrapper h1{
color: grey;
}
.active .wrapper h1{
color: red
}
but what I actually want is:
.wrapper .active h1{
color: red;
}
Is the only option to write the SCSS like so?
.wrapper{
background-color: $colour_nav_bg;
h1{
color: $colour_inactive;
}
.active h1{
color: red;
}
}
The HTML looks like this:
<ul class="wrapper">
<li class="active">
<h1>blah</h1>
</li>
</ul>
Best Answer
You can work around this today with a mixin like this one:
Since the
&
is essentially a list of lists, you can use list functions (nth, set-nth, join and append) to create the selector sequence you want. Then use@at-root
to output the new selector at root-level. Here's how you'd use it:Which will output: