Sass – @extend 및 상속

w3.css

공식 레퍼런스는 SCSS 문법을 기준으로 모든 문법을 설명하고 예시를 보여주므로 SCSS 문법으로 작성한 Sass를 사용하자.

@extend 지시어

@extend 지시어를 사용하면 한 선택기에서 다른 선택기로 CSS 속성 집합을 공유할 수 있다.

이 지시어는 몇 가지 작은 세부 사항만 다를 뿐 거의 동일한 스타일이 적용된 요소가 있는 경우에 유용하다.

예제

먼저 버튼에 대한 기본 스타일을 만들어보자.
이 스타일은 대부분의 버튼에 사용된다.
그 후 “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 this</button>와 같이 HTML 코드에서 요소에 대해 여러 클래스를 지정할 필요가 없다.
두 가지 스타일 세트를 얻으려면 .button-report를 지정하기만 하면 된다.

이 지시어는 Sass 코드를 매우 DRY하게 유지하는 데 도움이 된다.