Sass @extend 지시문 

@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 지시문을 사용하면 <button class = "button-basic button-report">Report</ button>와 같이 HTML 코드의 요소에 대해 여러 클래스를 지정할 필요가 없습니다.

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