@ Sass

親セレクタの参照

Sass では & を利用することで親のセレクタを参照することができます。例えば以下のように記述すると。

styles.scss

a {
  text-decoration: none;
  &:hover {
    text-decoration: underline;
  }
}
ul.pageNav {
  li {
    margin: 0;
    width: 50%;
    &.prev {
      float: left;
    }
    &.next {
      float: right;
    }
  }
}

次のように & の箇所が親のセレクタに置き換わりCSSが生成されます。

styles.css

a {
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
ul.pageNav li {
  margin: 0;
  width: 50%;
}
ul.pageNav li.prev {
  float: left;
}
ul.pageNav li.next {
  float: right;
}