😺 Study/CSS, SCSS
SCSS_@extend
<rin>
2020. 6. 24. 01:34
반응형
// 쉼표 구분자 (적용 후 css에서 확인해보면 '요소, 요소' 식으로 적용됨)
// mixin과 비슷하지만 되도록 mixin 쓰길 권장!
// 화면 꽉 차는 레이아웃에 가운데 정렬 필요한 요소들에 일괄적으로 적용시 좋음! (반복되는 영역에 쓰기)
// %이름 {스타일 적용}
예시)
.main { @extend %m0auto; }
.footer { @extend %m0auto; }
%m0auto { width: 1200px; margin: 0 auto; }
>> css에서 확인해보면 .main, .footer{ width: 1200px; margin: 0 auto; }로 적용됨
p.s - 유튜브 리베하얀 영상 참고
반응형