Sass @extend and Inheritance

@extend 지시문을 사용하면 한 셀렉터에서 다른 셀렉터로 CSS 속성 집합을 공유할 수 있습니다.

@extend 지시문은 약간의 세부 사항만 다른 거의 동일한 스타일의 요소가 있는 경우 유용합니다.

다음 Sass 예제는 먼저 버튼의 기본 스타일을 만듭니다.(이 스타일은 대부분의 버튼에 사용됨).
그런 다음 “Report”버튼용 스타일과 “Submit”버튼용 스타일을 하나씩 만듭니다.
“Report”및 “Submit”버튼은 모두 @extend 지시문을 통해 .button-basic 클래스의 모든 CSS 속성을 상속합니다.
또한 정의된 고유한 색상을 가지고 있습니다.

.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는 하기와 같습니다.

.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">Report this</ button>.
두 스타일 세트를 모두 가져 오려면 .button-report를 지정하기만 하면 됩니다.

@extend 지시문은 Sass 코드를 매우 DRY하게 유지하는 데 도움이 됩니다.