@extend
@extend
를 사용하면 된다.@extend 선택자;
복사 대상 선택자 btn의 속성을 @extend
를 활용해 복사하여 다른 버튼들의 CSS 속성에 붙여넣고 추가 CSS 속성을 적용해보자.
index.html
<button class="btn">initial button</button>
<div class="buttons">
<button class="order">order now</button>
<button class="add">add charset</button>
<button class="checkout">check out</button>
</div>
style.scss
.btn {
width: 200px;
padding: 7px;
background-color: #fff;
font-size: 18px;
text-transform: capitalize;
border-radius: 5px;
border: none;
cursor: pointer;
}
.order {
@extend .btn;
background-color: purple;
color: #fff;
}
.add {
@extend .btn;
background-color: yellowgreen;
color: #fff;
}
.checkout {
@extend .btn;
background-color: transparent;
color: #000;
border: 1px solid #000;
}
style.css
.btn, .checkout, .add, .order {
width: 200px;
padding: 7px;
background-color: #fff;
font-size: 18px;
text-transform: capitalize;
border-radius: 5px;
border: none;
cursor: pointer;
}
.order {
background-color: purple;
color: #fff;
}
.add {
background-color: yellowgreen;
color: #fff;
}
.checkout {
background-color: transparent;
color: #000;
border: 1px solid #000;
}
@extend
로 복사된 선택자를 플레이스 홀더 선택자 %
를 사용하여 컴파일된 CSS 코드에서 감출 수 있다.위에서 작성했던 style.scss
의 btn
클래스를 .
대신에 %
기호를 사용해보자.
styles.scss
%btn {
width: 200px;
padding: 7px;
background-color: #fff;
font-size: 18px;
text-transform: capitalize;
border-radius: 5px;
border: none;
cursor: pointer;
}
.order {
@extend %btn;
background-color: purple;
color: #fff;
}
.add {
@extend %btn;
background-color: yellowgreen;
color: #fff;
}
.checkout {
@extend %btn;
background-color: transparent;
color: #000;
border: 1px solid #000;
}
style.css
.checkout, .add, .order {
width: 200px;
padding: 7px;
background-color: #fff;
font-size: 18px;
text-transform: capitalize;
border-radius: 5px;
border: none;
cursor: pointer;
}
.order {
background-color: purple;
color: #fff;
}
.add {
background-color: yellowgreen;
color: #fff;
}
.checkout {
background-color: transparent;
color: #000;
border: 1px solid #000;
}
%
를 사용해 SCSS 선택자의 CSS 스타일을 @extend
로 복사해온 경우 컴파일된 CSS 코드에 .btn
이라는 복사 대상이 된 선택자가 표시되지 않는 것을 볼 수 있다.%
를 사용하면 좀 더 깔끔한 CSS 코드를 표시할 수 있다.