코딩독학) SASS(SCSS) Mixin 과 Include

SASS(SCSS) Mixin 과 Include

SASS(SCSS)의 편리한 기능 중 하나인 Mixin 기능은 코드의 재사용을 가능하게 해준다. 한 번 작성된 코드로 여러 곳에 같은 코드를 적용시킬 수 있다.

 

예를 들어, 아래와 같이 코드를 작성해둔다면 어디에서나 이 코드를 불러와 사용할 수 있다.

@mixin flex {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
}

 

사용할 때는 아래와 같이 사용한다.

.container{
    @include flex;
}

 

미리 정해둔 속성에서 불러올 때마다 값만 다르게 하고 싶다면 함수의 매개변수처럼 아래와 같이 mixin 을 만들 수도 있다.

$로 시작되는 변수명은 내맘대로 설정할 수 있다.

@mixin flex($direction, $justify, $align, $wrap) {
    display: flex;
    flex-direction: $direction;
    justify-content: $justify;
    align-items: $align;
    flex-wrap: $wrap;
}

 

그리고 불러올 때는 아래와 같이 불러온다.

.container{
    @include flex(row, center, center, nowrap);
}

 

그러나 이렇게 mixin 을 만들면 매번 불러올 때마다 모든 속성의 값을 지정해줘야만 하는 불편함이 있다. 그럴 때는 기본값을 설정해두고 필요한 경우에만 값을 변경할 수도 있다.

@mixin flex($direction: row, $justify: center, $align: center, $wrap: wrap) {
    display: flex;
    flex-direction: $direction;
    justify-content: $justify;
    align-items: $align;
    flex-wrap: $wrap;
}

 

불러올 때는 아래와 같이 불러온다.

.container{
    @include flex($wrap: nowrap);
}

 

 

자주 사용하는 코드는 이렇게 mixin으로 만들어두어 활용하면 코드 짜는 시간이 굉장히 단축된다.