SCSS - 재활용(Mixins)

코드가 겹치는 것들이 있으면 이를 재활용할 수 있게 Mixins을 이용하면 된다.

변수랑 유사하지만 여러 가지의 스타일을 한 번에 담을 수 있다는 장점이 있다.

 

선언은 아래 방식으로 해주고

@mixin 이름{
    재활용할 코드
}

 

사용하는 건 

@include 이름 

으로 불러온다

.box{
    @include 이름;
}

 

 

항상 같은 값만 사용하지 않고 값이 변할 수 있는데 이럴 때 인수를 사용하여 넣어줄 수 있다.

뒤에 javascript 함수처럼 @mixin box(변수)를 넣고 

바뀌는 값에 변수로 넣어준다.

@mixin box($size) {
    width:$size;
    height:$size;
    background-color:tomato;
}

사용할 때는 위와 똑같이 @include로 불러와 뒤에 괄호를 넣고 넣을 값을 입력해준다.

.container{
    @include box(200px);
    .item{
        @include box(100px);
    }
}

 

 

 

기본값 설정도 가능하다.

이렇게 변수 뒤에 콜론: 을 쓰고 기본값으로 쓸 값을 적어준다

@mixin box($size :100px) {
    width:$size;
    height:$size;
    background-color:tomato;
}

 

 

인수는 여러개를 넣을 수가 있는데

@mixin box($size :100px , $color:tomato)

//이렇게 순서대로 써서 사용하거나
@include box(200px, green);
 
 //뒤의 인수만 작성하고 싶은 경우에는 이방식으로 작성할 수 있다
 // 키워드 인수라고 한다.
@include box($color:green)