extends
- 같은 코드를 반복하고 싶지 않을 때 사용
- mixin은 상황에 따라 다르게 코딩을 하고 싶을때 사용 하는 거였음
- extends는 다른 코드를 확장 하거나 재사용 하고 싶을 때 사용
- 페이지에서 벗어나 따로 작성해놓을 때 사용
- %를 사용
<body>
<a href="#">Log In</a>
<button>Log Out</button>
</body>
//_buttons.scss//
%button {
font-family: inherit;
border-radius: 7px;
font-size: 12px;
text-transform: uppercase;
padding: 5px 10px;
background-color: peru;
font-weight: 500;
}
//style.scss//
@import "_buttons";
a {
@extend %button;
text-decoration: none;
}
button {
@extend %button;
border: none;
}
- 공통적인 부분을 extends 하고 다른것들은 또 따로 적어줘도 됨
댓글남기기