sass_3-2 親セレクタの参照 ＆

親セレクタを参照する場合の記述をやった。

CSSとsassとの比較

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

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;
}

CSSで書くとこうなるけれど、sassで親セレクタを参照するとこうなる。

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

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

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

所々についている＆が親セレクタに成り代わっているんですね。

参考

Sassの親セレクタ参照&について - MOL