SCSS. Reference second level ascending selector
Update: better than Original
.a{
$grandparent: &;
&:hover{
color: red;
& #{$grandparent}__b {
color: blue;
}
}
}
and Original:
@function r-pseudo($s) {
$string: nth(nth($s, 1), 1);
@return str-slice($string, 0, str-index($string, ':') - 1);
}
.a{
&:hover{
color: red;
& #{r-pseudo(&)}__b {
color: blue;
}
}
}
both generate
.a:hover {
color: red;
}
.a:hover .a__b {
color: blue;
}