[SCSS] 반복되는 SCSS 코드 활용하는 법

&.blue{
        background: $blue;
        &:hover{ 
            background: lighten($blue, 10%);
        }
        &:active{
            background: darken($color: $blue, $amount: 10%);
        }
    }
    &.gray{
        background: $gray;
        &:hover{ 
            background: lighten($gray, 10%);
        }
        &:active{
            background: darken($color: $gray, $amount: 10%);
        }
    }
    &.pink{
        background: $pink;
        &:hover{ 
            background: lighten($pink, 10%);
        }
        &:active{
            background: darken($color: $pink, $amount: 10%);
        }
    }

위의 예제와 같이 색깔별로 반복되는 CSS를 입힐 때가 있다.

이럴 때는 아래와 같이 @mixin 과 @include를 통해서 반복되는 코드를 활용할 수 있다.

 

1. @mixin을 통해서 활용할 코드를 함수화 

@mixin button-color($color) {
    background: $color;
    &:hover{ 
        background: lighten($color, 10%);
    }
    &:active{
        background: darken($color: $color, $amount: 10%);
    }
}

2. @include를 통해서 함수화 된 코드를 사용

&.blue{
        @include button-color($blue);
    }
    &.gray{
        @include button-color($gray);
    }
    &.pink{
        @include button-color($pink);
    }