在SCSS中扩展问题(&I)

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

.container {
  background-color: #f1f1f1;

  &I {
    font-weight: bold;
  }

  .box {
    width: 100px;
    height: 100px;
    background-color: #ccc;

    &I {
      color: red;
    }
  }
}

.container {
  background-color: #f1f1f1;
}

.containerI {
  font-weight: bold;
}

.container .box {
  width: 100px;
  height: 100px;
  background-color: #ccc;
}

.container .boxI {
  color: red;
}