Does sass support to use parent selector as follows? - css

Question

Problem
I mainly use the following methods. (SASS)
.person {
&.man {
.head { A }
}
&.woman {
.head { B }
}
.head { C }
}
But I want to use the following method. (SASS)
.person {
.head {
C
<parent_selector.man> {
A
}
<parent_selector.woman> {
B
}
}
}
compiled result (CSS)
.person .head { C }
.person.man .head { A }
.person.woman .head { B }
I want to know if there is such a function. Thank you.
My result
I got the idea from #falsarella's #at-root approach. It seems a bit crude, but this is also possible. (I actually used deeper selectors than the example, so it was hard to solve with at-root and #{$} alone.)
.person {
$person: &;
.head {
C
#at-root #{$person}.man .head {
A
}
#at-root #{$person}.woman .head {
B
}
}
}
Or it would be more convenient and readable(If the parent selector is not a simple selector.) to use it by naming $parent and overriding the previous $parent.
When I think about it once, the current selector is named $parent, so it is confusing. It might be better to ignore '>', ':after', ... of a parent selector and just name it as $person. (or create naming conventions.)
.earth {
$parent: &;
.person {
$parent: &;
.head {
C
#at-root #{$parent}.man .head {
A
}
#at-root #{$parent}.woman .head {
B
}
}
}
}
As a result of further Googling, postcss seems to support parent selectors I want.

Answer 1

There's no "parent" selector in Sass, but, in your case, you can use a tricky #{&} interpolation together with #at-root, like this:
.person {
.head {
color: white;
#at-root .man#{&} {
color: blue;
}
#at-root .woman#{&} {
color: pink;
}
}
}
Resulting in the following CSS:
.person .head {
color: white;
}
.man.person .head {
color: blue;
}
.woman.person .head {
color: pink;
}

Answer 2

Unfortunately, not. I think the first example that you give is the best way to achieve this. Another option might be:
.head {
.person & {
color: red;
}
.person.man & {
color: blue;
}
.person.woman & {
color: green;
}
}
It will produce the same compiled result as you desire. But beware of nesting the .head class. It will trip you up.

Answer 3

The following does not really uses a parent selector. Just uses a SASS #mixin to give same CSS output.
#mixin personHead($gender) {
#if $gender == man {
&.man .head{
property: A;
}
}
#if $gender == woman {
&.woman .head{
property: B;
}
}
#if $gender == "" {
.head{
property: C;
}
}
}
.person { #include personHead(man); }
.person { #include personHead(woman); }
.person { #include personHead(""); }
/* Compiled CSS Output */
.person.man .head {
property: A;
}
.person.woman .head {
property: B;
}
.person .head {
property: C;
}