이번에 sass에 대한 feedback이 많았는데 그 중에 처음 사용하는데 애먹었떤 것 중 하나가 변수를 활용한 mixin이다.
다음에 써먹기 위해 잠깐 정리를 해보려고 한다.

원래 쓰던 방식

처음 mixin을 배웠던 방식이다.

@mixin flex{
    display: fles;
    justify-content: center;
    align-items: center;
}

.container {
    @includes flex;
}

mixin에 변수 활용을 하지 않았기 때문에 다른 속성값을 변경할 수 없다.

변수를 활용한 mixin

1. mixin 선언

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

1. 사용방법

mixin 선언 시 인자를 justify-content와 align-items의 값으로 넣는 방법이 있다.

.container {
    @includes flex(center, center);
}

2. mixin 선언

mixin 선언 시 인자의 값을 미리 선언하는 방식도 있다.

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

2. 사용방법

(1) 그대로 쓰기

.container {
    @includes flex;
}

인자를 넣어줄 필요 없이 바로 flex만 써도 (center, center)를 넣은 것과 같다.

(2) justify-content에 space-between을 넣고 싶을 때

.container {
    @includes flex(space-between);
}

justify-content의 속성값은 첫번째 인자로 받기 때문에 하나의 인자만 넣으면 justify-content의 속성값으로 적용 된다.

(3) align-items에 end값을 적용 하고 싶을 때

.container {
    @includes flex(center, end);
}

첫번째 인자는 justify-content의 값이기 때문에 기존에 정했던 값인 center를 첫번째 인자로 두고 두번째 인자에 원하는 align-items의 값을 넣으면 된다.

써보니 쉬운데 처음 써보려고 했을 때 함수랑 비슷한건 알겠는데 사실 함수 자체도 별로 친숙하지 않아서 난감했다. 이번에 써보았으니 나중에 다시 이 글을 보면서 활용했으면 좋겠다.