求職者支援訓練Webデザイン Webサイト制作科 白描

求職者支援訓練Webサイト制作科 補足メモ Web白描

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
















f:id:web-0220:20180927182514p:plain