CSS의 전처리기 언어인 SCSS를 사용하는 방법 중
다른 스타일을 가져오는 방법에 대하여 알아봅니다. 바로
@extend를 사용한 스타일 확장 방법입니다.
# SCSS의 스타일 확장 알아보기, @extend
전처리기 덕분에 CSS 역시 자바스크립트의 객체처럼
다른 스타일을 상속 받는 것처럼 사용하는 것이 가능합니다. 상속과는 다를 수 있으나 스타일을 확장하여 사용할 수 있어 모든 스타일을 정의하지 않아도 다른 스타일을 가져와 사용할 수 있죠. SCSS의 @extend가 바로 그것입니다.
@extend <가져올 스타일>
문법은 위와 같이 간단하며 가져올 스타일을 명시하면 됩니다.
이 방법은 매우 유용합니다. 특히 컴포넌트 등의 인터페이스를 사용할 때도 간단히 확장해 사용할 수 있고 아니면 아이콘 등의 비슷한 그룹끼리 적용하여 사용할 수 있게죠.
그럼 아래는 @extend를 사용한 예제와 방법입니다.
! scss @extend 사용하는 방법 및 예제보기특히 버튼을 생각하면 동일한 스타일이 많이 사용되므로 @extend를 적용하기 아주 좋은 예 중 하나입니다. 버튼의 스타일을 적용하고 각각 스타일을 적용하는 예제를 만들어볼까 합니다.
.btn {
display: inline-block;
vertical-align: middle;
min-width: 60px;
height: 30px;
background: gray;
color: #000;
}
일단 기본적인 버튼의 스타일을 적용했습니다. 이제 모든 버튼을 위의 스타일을 가지되 여러가지 색을 가지도록 정의해보겠습니다.
// 흰색 버튼
.btn-white {
@extend .btn;
backgroud-color: white;
}
// 빨간 버튼
.btn-red {
@extend .btn;
backgroud-color: red;
}
간단하게 흰색과 빨간색 버튼을 만들어 보았습니다. 매우 간단합니다. 이번에는 비활성화 버튼을 만들어볼까요?
// 비활성화 버튼
.btn-disabled {
@extend .btn;
cursor: not-allowed;
pointer-events: none;
opacity: .7;
}
이번에도 역시 동일하게 @extend를 사용하여 클릭이 안되고 약간의 투명도를 주어 비활성화 버튼을 구현하였습니다.
아래처럼 전처리기를 활용해 사용할 수도 있겠죠.
.btn {
display: inline-block;
vertical-align: middle;
min-width: 60px;
height: 30px;
background: gray;
color: #000;
&-white {
@extend .btn;
backgroud-color: white;
}
&-red {
@extend .btn;
backgroud-color: red;
}
&-disabled {
@extend .btn;
cursor: not-allowed;
pointer-events: none;
opacity: .7;
}
}
여기까지 scss의 @extend를 사용한 스타일 확장 방법에 대하여 알아보았습니다.
참고로 비슷한 방법으로 @include, @mixin을 사용할 수 있습니다. 스타일을 미리 정의하고 필요할 때 가져올 것인지... 아니면 미리 적용한 스타일을 확장해 사용할 것인지의 차이점이 있겠죠.
scss @include, @mixin 더 알아보기 >https://webisfree.com/2019-10-08/[scss]-mixin-include-사용방법-및-예제보기