[SASS] 7강 SASS의 @extend - OSSAM강좌

 

 

 

 

 

** 영상으로 보고 싶은 분은 아래 주소를 클릭해주세요.

https://youtu.be/O1U3zkEzOvk

 

 

 

 

 

 

 

 

 

1. @extend문법

- 특정선택자가 다른 선택자의 모든 스타일을 가져야하는 경우 사용합니다. 

- 선택자의 확장 기능이라고 볼 수 있습니다. 

 

@extend 선택자

 

 

 

 

 

 

 

 

1) 기본 예제

## HTML코드

<button type="button" class="button_basic">일반버튼</button>
<button type="submit" class="button_submit">전송버튼</button>
<button type="reset" class="button_reset">초기화버튼</button>

- 일반버튼과 전송버튼과 초기화버튼 이렇게 세개를 작성해보도록 하겠습니다.

 

 

 

 

## SASS코드

.button-basic  {
    border: none;
    padding: 15px 30px;
    text-align: center;
    font-size: 16px;
    cursor: pointer;
}
.button-submit{
    @extend .button-basic;
    background-color: palevioletred;
}
.button-reset{
    @extend .button-basic;
    background-color: lightgray;
}

- [.button-basic]을 기본 선택자로 설정하고, 전송버튼과 초기화버튼은 거기에 색만 바꿔보도록 하겠습니다.

 

 

 

 

## CSS코드

.button-basic, .button-submit, .button-reset {
  border: none;
  padding: 15px 30px;
  text-align: center;
  font-size: 16px;
  cursor: pointer;
}

.button-submit {
  background-color: palevioletred;
}

.button-reset {
  background-color: lightgray;
}

- CSS에서 위와 같이 세개의 선택자가 한번에 적용되어 있는 것을 확인할 수 있습니다. 

 

 

 

 

## 브라우저 결과

- 버튼에 각각 색상이 적용되는 것을 확인할 수 있습니다.

 

 

 

 

 

 

 

 

 

 

 

 

2) @extend문제점

- 이 기능을 사용하면 내 현재 선택자가 어디에 첨부될지 알기가 어려울 수 있습니다.

- 2번 작성하기 싫은데 위와 같이 두번작성될 수 있습니다.

- 한번의 @extend로 얼마나 많은 CSS가 생성되는지에 대한 문제가 있을 수 있습니다.

 

** 따라서 @extend는 권장하지 않으며, 지난 번에 살펴본 @mixin을 권장합니다. 

https://ossam5.tistory.com/91?category=895554

[SASS] 6강 SASS의 @mixin과 @include - OSSAM강좌