[basic] SCSS - @extend (상속)

1. @extend 정의
2. @extend 구문
3. @extend 예제

@extend 정의

 

타 선택자의 CSS를 그대로 상속 공유.

기본 CSS 정의 후, 기본 CSS 포함하는 유사 CSS 정의할 때 사용.

 

@extend 구문

 

selector {

    @extend another_selector;

    ....

}

 

@extend 예제

SCSS

 

.a  {

  ...

}

.b  {

  @extend .a;

  background-color: red;

}

.c  {

  @extend .a;

  background-color: blue;

}

 

---

CSS

 

.a, .b, .c {

  ...

}

.b  {

  background-color: red;

}

.c  {

  background-color: blue;

}