Sass ampersand and parent styles - css

Question

My HTML:
<div id="form" class="special">
<div class="header">My special form</div>
<div>
And the following sass code:
#form {
.header {
padding: 20px 10px;
.special & {
background: $special-color;
}
}
}
Which produces:
#form .header {
padding: 20px 10px;
}
.special #form .header {
background: #7cc52c;
}
However this doesn't give me the result I want. Instead of the CSS above I want to have: .special#form .header (the element form with class special, not the element .special which has form)

Answer 1

You can achieve your desired css this way.
#form {
.header {
padding: 20px 10px;
#at-root #{selector-replace(&, '#form', '.special#form')} {
background: blue;
}
}
}
This scss compiles to the following css
#form .header {
padding: 20px 10px;
}
.special#form .header {
background: blue;
}
Using the selector-replace function, you can easily change the part of the compound selector that needs changing. In this example, that would be replacing #form with .special#form. The #at-root directive ensures that the selector is placed at the top level and not nested within any selector.
When the parent selector is appended and nested as you did in your question, it reverses the selector. There are situations where this might be useful, one such situation is when working with Modernizr as illustrated in one of the slides on here
Hope this helps.

Answer 2

The simplest way to do this is by using #at-root and interpolation
$special-color:#7cc52c;
#form {
.header {
padding: 20px 10px;
// use #at-root to move .special out of #form .header
#at-root {
// append #form .header using the & selector
// note! you need to use interpolation #{} to
// remove the white space between .special and #form
.special#{&} {
background: $special-color;
}
}
}
}