第3章これだけはマスターしたいSassの基本機能

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

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

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

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

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

.block {
    width: 500px;
    &__element {
        margin-bottom: 2em;
        &--modifier {
            background-color: #f00;
        }
    }
}

.block {
  width: 500px;
}

.block__element {
  margin-bottom: 2em;
}

.block__element--modifier {
  background-color: #f00;
}

.block {
    width: 500px;
    & &__element {
        margin-bottom: 2em;
        &--modifier {
            background-color: #f00;
        }
    }
}

.block {
  width: 500px;
}

.block .block__element {
  margin-bottom: 2em;
}

.block .block__element--modifier {
  background-color: #f00;
}