• SCSS_@extend

    2020. 6. 24.

    by. <rin>

    반응형

    // 쉼표 구분자 (적용 후 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 - 유튜브 리베하얀 영상 참고

    반응형

    '😺 Study > CSS, SCSS' 카테고리의 다른 글

    SCSS_each문  (0) 2020.06.24
    SCSS_#{ } 문자보간  (0) 2020.06.24
    SCSS_@mixin과 @include  (0) 2020.06.24
    SCSS_선택자  (0) 2020.06.24
    SCSS_개념  (0) 2020.06.24

    댓글

Designed by Nana