css - ネストされたセレクター内のアンパサンド (親セレクター)

Question

これは文書化されていないか、単に不可能ですか?

#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 3.3 では、これと同様の構文の改善がリリースされる予定です。Sass の問題に関する機能に関するディスカッションは、こちら でご覧いただけます。

Answer 2

私はそれが非常に役立つことに同意します。残念ながら、現在のところ、SASS (または私が知っている他の CSS プリプロセッサ) では使用できません。

Answer 3

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

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