sass - 「&」セレクターは何を選択しますか?

Question

このcodepen には css セレクターがあり、その&:hoverセレクターは何と一致しますか?

Answer 1

アンパサンドはSassの機能だと思います。ドキュメントから：

親セレクターの参照: &

ネストされたルールの親セレクターをデフォルト以外の方法で使用すると便利な場合があります。たとえば、そのセレクターがホバーされたとき、または body 要素が特定のクラスを持っているときのために、特別なスタイルが必要になる場合があります。このような場合、 & 文字を使用して、親セレクターを挿入する場所を明示的に指定できます。

Answer 2

丁度。Sassでは、このようなものを持つことができます...

 div {
    background: green;

    p {
        background: red;

        &:hover {
            background: blue;
        }

        &:active {
           background: blue; 
        }
    }   
}

...これを CSS に変換すると、次のようになります。

div {
    background: green;
}

div p {
    background: red;
}

div p:hover {
    background: blue;
}

div p:active {
    background: blue;
}

編集: &hover: から &:hover へ

Answer 3

あまり知られていない使用方法の 1 つは、スタイルの最後にアンパサンドを追加して、親セレクターが子セレクターになるようにすることです。

例えば：

 h3
   font-size: 20px
   margin-bottom: 10px

 .some-parent-selector &
   font-size: 24px
   margin-bottom: 20px

となり、

  h3 {
    font-size: 20px;
    margin-bottom: 10px;
  }

  .some-parent-selector h3 {
    font-size: 24px;
    margin-bottom: 20px;
  }

あなたはここで詳細を読んで使用することができます

http://thesassway.com/intermediate/referencing-parent-selectors-using-ampersand