Sass/SCSS 7. @extend

용도

공통된 스타일을 반복적으로 사용하기보다 한 번 선언하고 여러번 사용하고 싶을 때 @extends 문법을 쓴다.

예시1) 클래스를 선언하여 extend하는 법 => css 파일에서도 존재하는 클래스

//scss

.btn{
    width: 100px;
    height: 100px;
    padding: 20px;
}

.btn-green{
    @extend .btn;
    color:rgb(196, 253, 196)
}


//css
.btn, .btn-green {
  width: 100px;
  height: 100px;
  padding: 20px;
}

.btn-green {
  color: rgb(196, 253, 196);
}/*# sourceMappingURL=main.css.map */

 

예시2) 가상클래스 %를 선언하여 extend하는 법 => css 파일에서는 생성했던 가상 클래스가 존재하지 않음

//scss

%btn{
    width: 100px;
    height: 100px;
    padding: 20px;
}

.btn-green{
    @extend %btn;
    color:rgb(196, 253, 196)
}
.btn-red{
    @extend %btn;
    color: red;
}

//css
.btn-red, .btn-green {
  width: 100px;
  height: 100px;
  padding: 20px;
}

.btn-green {
  color: rgb(196, 253, 196);
}

.btn-red {
  color: red;
}/*# sourceMappingURL=main.css.map */