【CSS 설계】합성 컴포넌트를 @extend로 구현한다

구성 요소를 만들 때 다른 구성 요소를 부품으로 사용할 수 있습니다.
예를 들면, 이하의 앙케이트 테이블에서는, 「앙케이트 행」이 1개의 컴퍼넌트가 되어 있어, 그 중에서 「버튼」컴퍼넌트가 사용되고 있습니다.



이것을 솔직하게 구현하면, 「앙케이트행」과 「버튼」을 각각 독립한 컴퍼넌트로 구현해, HTML상에서 조합한다, 라고 하는 느낌이 될까 생각합니다.

.action-btn {
  // ボタンのスタイル
}

.enquete {
  // アンケート行のスタイル
}

<table class="enquete-table">
  <tr><th>アンケート名</th><th>回答</th></tr>
  <tr class="enquete">
    <td class="enquete__title">アンケート１</td>
    <td class="enquete__action"><button class="action-btn">回答する</button></td>
  </tr>
  <tr class="enquete">
    <td class="enquete__title">アンケート２</td>
    <td class="enquete__action"><button class="action-btn">回答する</button></td>
  </tr>
  <tr class="enquete">
    <td class="enquete__title">アンケート３</td>
    <td class="enquete__action"><button class="action-btn">回答する</button></td>
  </tr>
</table>

이것으로도 나쁘지는 않습니다만, .enquete 와 .action-btn 의 관계를 Sass 상에서 표현할 수 없기 때문에, 「이 2개를 조합해 사용한다」라고 하는 룰을 어딘가에 정해 두지 않으면 안됩니다.

또, 「응답 완료」의 스타일을 만들 때도,

.action-btn {
  // ボタンのスタイル

  &--disabled {
    // 利用できないボタンのスタイル
  }
}

.enquete {
  // アンケート行のスタイル

  &--done {
    // 回答済みのスタイル
  }
}

  <tr class="enquete enquete--done">
    <td class="enquete__title">アンケート３</td>
    <td class="enquete__action"><button class="action-btn action-btn--disabled">回答済み</button></td>
  </tr>

이와 같이, 각각의 Modifier 를 준비해 HTML 상에서 조합해야 하고, 전달해야 할 규칙이 늘어나 버립니다.

컴포넌트 관계를 Sass에서 표현하기

.enquete 의 Element 로서 버튼 클래스를 준비해, @extend 를 사용해 .action-btn 를 적용합니다.

.enquete {
  // アンケート行のスタイル

  // 回答ボタン
  &__answer-btn {
    @extend .action-btn;
  }
}

  <tr class="enquete">
    <td class="enquete__title">アンケート１</td>
    <td class="enquete__action"><button class="enquete__answer-btn">回答する</button></td>
  </tr>

이렇게 하면 답변 버튼에 .action-btn 를 사용하고 있다는 것을 Sass를 보는 것만으로 알게 되며 HTML을 작성할 때 "조합 규칙"을 참조할 필요도 없어집니다.

또한 사용하는 버튼을 .action-btn 하는 가능성도 있습니다만, 이 방법이라면 .control-btn 하는 클래스를 변경하는 것만으로 끝납니다.

답변 된 버튼의 Modifier도 Sass 측에서 흡수합니다.

@extend 의 .enquete--done 에 .enquete__answer-btn 를 사용하여 @extend 를 적용합니다.

.enquete {
  // アンケート行のスタイル

  &--done {
    // 回答済みのスタイル

    // 回答ボタン
    .enquete__answer-btn {
      @extend .action-btn--disabled;
    }
  }
}

  <tr class="enquete enquete--done">
    <td class="enquete__title">アンケート３</td>
    <td class="enquete__action"><button class="enquete__answer-btn">回答済み</button></td>
  </tr>

이제 답변이 끝난 버튼에는 .action-btn--disabled 를 사용하고 있는 것을 Sass 를 보는 것만으로 알게 되고 HTML 측도 단순히 .action-btn--disabled Modifier 를 사용하고 있는 것처럼 쓸 수 있습니다.