Sass @extend

@extend 지시문을 사용하면 한 선택자에서 다른 선택자로 일련의 CSS 속성을 공유 할 수 있습니다.

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

 

---

 

다음 Sass 예제는 먼저 버튼의 기본 스타일을 만듭니다 (이 스타일은 대부분의 버튼에 사용됨).

그런 다음 "보고서"버튼에 대한 스타일 하나와 "제출"버튼에 대한 스타일 하나를 만듭니다.

"보고서"및 "제출"버튼은 모두 @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;
}

 

출력결과

.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;
}