第3章 これだけはマスターしたいSassの基本機能3-3 親セレクタの参照&（アンパサンド）Sample Code

1
#side {
2
  width: 240px;
3
}
4
body.top #side {
5
  width: 300px;
6
}
7
#side ul.bnr {
8
  margin-bottom: 10px;
9
}

1
#side {
2
  width: 240px;
3
  ul.bnr {
4
    margin-bottom: 10px;
5
  }
6
}
7
body.top #side {
8
  width: 300px;
9
}

1
#side {
2
  width: 240px;
3
  body.top & {
4
    width: 300px;
5
  }
6
  ul.bnr {
7
    margin-bottom: 10px;
8
  }
9
}

1
a {
2
  text-decoration: none;
3
  &:hover {
4
    text-decoration: underline;
5
  }
6
}
7

8
ul.pageNav {
9
  li {
10
    margin: 0;
11
    width: 50%;
12
    &.prev {
13
      float: left;
14
    }
15
    &.next {
16
      float: right;
17
    }
18
  }
19
}

1
a {
2
  text-decoration: none;
3
}
4
a:hover {
5
  text-decoration: underline;
6
}
7

8
ul.pageNav li {
9
  margin: 0;
10
  width: 50%;
11
}
12
ul.pageNav li.prev {
13
  float: left;
14
}
15
ul.pageNav li.next {
16
  float: right;
17
}

1
.block {
2
  width: 500px;
3
  &__element {
4
    margin-bottom: 2em;
5
    &--modifier {
6
      background-color: #f00;
7
    }
8
  }
9
}

1
.block {
2
  width: 500px;
3
}
4
.block__element {
5
  margin-bottom: 2em;
6
}
7
.block__element--modifier {
8
  background-color: #f00;
9
}

1
.block {
2
  width: 500px;
3
  & &__element {
4
    margin-bottom: 2em;
5
    &--modifier {
6
      background-color: #f00;
7
    }
8
  }
9
}

1
.block {
2
  width: 500px;
3
}
4
.block .block__element {
5
  margin-bottom: 2em;
6
}
7
.block .block__element--modifier {
8
  background-color: #f00;
9
}