ネストされたセレクタ内でアンパサンド（SASS親セレクタ）を使用する

Question

これは私が昨年ほどSass/Scssを使用して以来私が気にしていたものです。私は親セレクタを一般的な意味で理解しています。

私は（それが可能な文書またはだけではないではないですか）苦労するところです：

#parent { 
    #child { 
    width: 75%; 

    .additional_parent_class & { 
     width: 50%; 
    } 
    } 
} 

これは基本的に変わります。これが原因の実装の理にかなっている間

.additional_parent_class #parent #child { 
    width: 50%; 
} 

アンパサンドとその使い方私はそれがこれを達成するために取得しようとしている場合：

#parent.additional_parent_class #child { 
    width: 50%; 
} 

私はこれを達成することができた唯一の方法は、子宣言の外に別のルールを記述することである。この一方で

#parent{ 
    #child { 
    width: 75%; 
    } 

    &.additional_parent_class #child { 
    width: 50%; 
    } 
} 

この実装では必ずしも「尻の痛み」であるとは限りません。#childには両方のルールで複製する必要がある独自の子があると、生産性が悪いようです。

とにかく、私はちょっと気が利いているかもしれませんが、セレクタをより多くの方法でトラバースすることができれば素晴らしいと思います。

誰かが私は何かを知っていますか？

ありがとうございます！

Answer 1

非常に役に立ちそうです。残念ながら、現在SASS（または私が知っている他のCSSプリプロセッサ）ではこれができません。

Answer 2

これは現在可能ではありませんが、&構文のこのような改良点は、Sass 3.3でリリースされる予定です。あなたはSassの問題hereの機能についての議論に従うことができます。

Answer 3

これはv3.4で可能ですが、3.3であるかもしれませんが、わかりません。 私は構文のファンではありません。 &ははるかに簡単です。エイリアスの& ^のようなものがあったことを望む:)

#parent { 
    #child { 
     width: 75%; 
     @at-root #{selector-replace(&, '#parent', '#parent.additional_parent_class')} { 
      width: 50%; 
     } 
    } 
}