TIL 26 SCSS(4) Extends

#Extends
=>같은 코드를 중복하고 싶지 않을때 사용한다. (객체와 비슷하다?)

Mixins은 상황에 따라 다르게 코딩을 하고싶을때 사용하는거라면
Extends는 말 그대로 다른 코드를 확장(extends)하거나 코드를 재사용 하고싶을때 사용한다.

page에서 분리해야하는 element들이 많을때 유용하게 사용한다.
(button, title, card , navigation 등등)
extend를 사용할 수 있는 scss만드는 방법은 "%"를 사용하는 것이다

사용방법은 styles.scss 파일에 @import "${name}"을 작성한다
그리고 내가 적용하고싶은 대상에게 @extend %name을 작성하면 된다.

1. extends.scss

%button{

border-radius: 7px
fon-size: 12px;
text-transform: uppercase;
padding: 20px;
background-color: powerblue;

}

2. style.scss

p {
  @extend %button;
}

button {
  @extend %button;
   border:none;
}

위와같이 extend를 사용하여 공통적인 스타일은 공유하고 border:none처럼 스타일을 더 추가하여 style을 분리할 수 있게 해준다.