Sass @extend 및 상속

Sass @extend 지시문

@extend 지시문은 하나의 선택자에서 다른 선택자로 CSS 속성을 공유할 수 있도록 합니다.

의심스럽게도 거의 동일한 스타일을 가진 요소가 있지만 일부 작은 세부 사항만 다를 때는 @extend 지시문은 매우 유용합니다.

아래 Sass 예제는 먼저 버튼에 기본 스타일을 생성합니다(이 스타일은 대부분의 버튼에 사용됩니다). 그런 다음, "Report" 버튼에 스타일을 생성하고, "Submit" 버튼에 스타일을 생성합니다. "Report"과 "Submit" 버튼은 다음과 같이 @extend 지시문은 .button-basic 클래스의 모든 CSS 속성을 继承합니다. 또한, 그들은 자신의 색상을 정의합니다:

SCSS 문법:

.button-basic  {
  border: none;
  padding: 15px 30px;
  text-align: center;
  font-size: 16px;
  cursor: pointer;
}
.button-report  {
  @extend .button-basic;
  background-color: red;
}
.button-submit  {
  @extend .button-basic;
  background-color: green;
  color: white;
}

编译后，CSS 将如下所示：

CSS 출력：

.button-basic, .button-report, .button-submit {
  border: none;
  padding: 15px 30px;
  text-align: center;
  font-size: 16px;
  cursor: pointer;
}
.button-report  {
  background-color: red;
}
.button-submit  {
  background-color: green;
  color: white;
}

사용함으로써 @extend 지시어는 HTML 코드의 요소에 여러 클래스를 지정할 필요가 없습니다. 예를 들어: <button class="button-basic button-report">이 문제를 보고</button>. .button-report를 지정하면 두 가지 스타일을 얻을 수 있습니다.

@extend 지시어는 Sass 코드가 매우 건조하게 유지되도록 도와줍니다 (DRY).