<div class="container">
  <div class="child">
    Child
  </div>
</div>

<section>
  <h1>タイトル</h1>
</section>

<div class="apple">
  <p class="text">りんご</p>
</div>
<div class="orange">
  <p class="text">みかん</p>
</div>

<div class="container">
  <div class="child1">子供1</div>
  <div class="child2">子供2</div>
</div>

<a class="link" href="#">リンク</a>

<div class="box">BOX</div>

<div class="grandparent">
  <div class="parent">
    <div class="me">ME</div>
  </div>
</div>

.container {
  .child {
    color: red;
  }
}

section {
  h1 {
    color: red;
  }
}

.apple,
.orange {
  .text {
    color: red;
  }
}

.container {
  .child1,
  .child2 {
    color: red;
  }
}

.link {
  &:hover,
  &:active {
    color: red;
  }
}

.box {
  color: blue;

  @media (min-width: 800px) {
    color: red;
  }
}

.me {
  border: 1px solid #333;

  .grandparent & {
    color: red;
  }
}

/* その他 */

body {
  padding: 24px;
  font-size: 24px;
  font-weight: bold;
  text-align: center;
  font-family: sans-serif;
  display: grid;
  place-content: center;
  gap: 14px;
  min-height: 100vh;
}

body > * {
  display: block;
}

h1 {
  font-size: 24px;
}