#12 - SCSS 재사용 - @mixin @include

SCSS 재사용

스타일을 재사용할 수 있도록 도와주는 기능이다.

 

 

---

기본 구조

재사용에서 사용하는 함수는 아래와 같다.

1. @mixin : 재활용할 코드를 정의함
2. @include : 정의된 재활용 코드를 사용

SCSS

@mixin 믹스인이름{
    스타일;
}
.class{
    @include 믹스인이름;
}

 

---

사용 예시

SCSS

@mixin test{
    font{
        size : 14px;
        weight : bold;
    }
    background-color : red;
    &::after{
        content : "123";
    }
    span.subclass{     
        background-color : blue;
    }
}

.class{
    @include test;
}

Compile 된 CSS

.class{
     font-size : 14px;
     font-weight : bold;
     background-color : red;
}
.class::after{
    content : "123";
}
.class span.subclass{     
    background-color : blue;
}