第3章 これだけはマスターしたいSassの基本機能3-2 ルールのネスト（Nested Rules）Sample Code

1
<main id="main">
2
  <section>
3
    <h1>見出し</h1>
4
    <p>段落</p>
5
    <p class="notes">注意書き</p>
6
    <ul>
7
      <li>リスト</li>
8
    </ul>
9
  </section>
10
  <section>
11
    <h1>見出し</h1>
12
    <p>段落</p>
13
  </section>
14
</main>

1
#main section {
2
  margin-bottom: 50px;
3
}
4
#main section h1 {
5
  font-size: 140%;
6
}
7
#main section p, #main section ul {
8
  margin-bottom: 1.5em;
9
}
10
#main section p.notes {
11
  color: red;
12
}

1
#main {
2
  section {
3
    margin-bottom: 50px;
4
    h1 {
5
      font-size: 140%;
6
    }
7
    p, ul {
8
      margin-bottom: 1.5em;
9
    }
10
    p.notes {
11
      color: red;
12
    }
13
  }
14
}

1
#main {
2
  section {
3
    + section {
4
      margin-top: 50px;
5
    }
6
    > h1 {
7
      font-size: 140%;
8
    }
9
  }
10
}

1
#main section + section {
2
  margin-top: 50px;
3
}
4
#main section > h1 {
5
  font-size: 140%;
6
}

1
#main {
2
  section + section {
3
    margin-top: 50px;
4
  }
5
  section > h1 {
6
    font-size: 140%;
7
  }
8
}

1
#main {
2
  float: left;
3
  width: 640px;
4
  @media (width < 640px) {
5
    float: none;
6
    width: auto;
7
  }
8
}

1
#main {
2
  float: left;
3
  width: 640px;
4
}
5
@media (width < 640px) {
6
  #main {
7
    float: none;
8
    width: auto;
9
  }
10
}