😺 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 - 유튜브 리베하얀 영상 참고

반응형