scssを使用して子どもの中から親擬似クラスを選択する方法

Question

次のパターンを使用して親を選択したいと思います。

私はこれを親セレクタ内に書くことができますが、子セレクタ内から子に親の擬似クラスを接頭辞として付けることができるかどうかを知りたいと思います。

JSX：

<div class="parent"> 
    <div class="child" /> 
</div> 
<div class="parent"> 
    <div class="child" /> 
</div> 

SCSS：

.parent { 
    height: 100px; 

    .child { 
    // the goal is to write this so it produces the CSS output below, from 
    // within .child 

     &:first-child & { 
      height: 50px; 
     } 
    } 
} 

CSS [出力]：これは本当に簡単であるように

.parent:first-child .child { 
    height: 50px; 
} 

Answer 1

だからそうです。うわー。

あなただけの次の手順を実行します。

SCSS：

.child { 
    .parent:first-child & { 
     height: 50px; 
    } 
} 

これはおそらく愚かに見えますが、私のような状況のために、それは実際に便利です。

Answer 2

はたぶん最も有用なコードではありませんが、動作します：

SASS

.parent { 
    $root: &; 
    height: 100px; 
    @at-root { 
    .child { 
     @at-root { 
     #{$root}:first-child #{&} { 
      height: 50px; 
     } 
     } 
    } 
    } 
} 

OUTPUT

.parent { 
    height: 100px; 
} 
.parent:first-child .child { 
    height: 50px; 
}