Sassの「&」を使ったセレクタについてのメモ

久しぶりにSassを使うと「あれ?&ってこんな使い方だっけ?」と謎に混乱したので、二度と忘れないようにセレクタについて自分用メモ。
CSSへのコンパイラはSassMeister使ってます。

先にJsFiddleで試した描画結果。

HTML

<div class="block">
  <div class="block__element"></div>
  <div class="block__element"></div>
  <div class="block__element"></div>
</div>

Sass

.block
  border: 1px solid grey

  &__element
    height: 100px
    width: 100px
    
    &
      border: 10px solid black

    & + &
      margin-top: 10px

    &:first-child
      background-color: red

    &:nth-child(2)
      background-color: blue

    &:nth-child(3)
      background-color: green

    &:hover
      opacity: .7

CSS

.block {
  border: 1px solid grey;
}
.block__element {
  height: 100px;
  width: 100px;
}
.block__element + .block__element {
  margin-top: 10px;
}
.block__element:first-child {
  background-color: red;
}
.block__element:nth-child(2) {
  background-color: blue;
}
.block__element:nth-child(3) {
  background-color: green;
}
.block__element:hover {
  opacity: 0.7;
}

よしこれでもう忘れない。何に混乱していたか忘れたから不安だけど。
でもnth-childの番号の付け方と配列のインデックスとを混同することはまだありそう。

Web制作者のためのSassの教科書