Sass - 親セレクタの参照 &

親セレクタの参照 &（アンパサンド）

《sample.scss》

.side {
  width: 240px;
  ul.bnr {
    margin-bottom: 10px;
  }
}
body.top .side {
  width: 300px;
}

《sample.css》

.side {
  width: 240px;
}

.side ul.bnr {
  margin-bottom: 10px;
}

body.top .side {
  width: 300px;
}

• 以下のような書き換えが可能です

《sample.scss》

.side {
  width: 240px;
  body.top & {
    width: 300px;
  }
  ul.bnr {
    margin-bottom: 10px;
  }
}

《sample.scss》

a {
  text-decoration: none;
  &:hover {
    text-decoration: underline;
  }
}

ul.pageNav {
  li {
    margin: 0;
    width: 50%;
    &.prev {
      float: left;
    }
    &.next {
      float: right;
    }
  }
}

《sample.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;
}