CSSの設計 親子関係のエレメント

css-pattern3.css

.area {
  position: relative;
  width: 100%;
}
.area.content-area {
  margin: 8px auto;
  width: 860px;
  border: 1px solid #ddd;
}
.area.content-area-inner {
  padding: 16px;
}

css-pattern3.html

<section class="area content-area">
  <div class="content-area-inner">
    <!-- コンテンツがびっしり -->
  </div>
</section>

css-pattern3.less

.area {
  position: relative;
  width: 100%;
  .content-area {
    margin: 8px auto;
    width: 860px;
    border: 1px solid #ddd;
    &-inner {
      padding: 16px;
    }
  }
}