[TIL] Today I Learned : React sass - @mixin

css.. 

웹이 발전하면서 css 또한 유지보수하기 힘들어졌다.

javascript를 위해 React가 나온 것 처럼

css를 위해서는 Sass가 나왔다고 생각하면 쉽다.

 

실제로는 React의 라이브러리 중에 하나다.

sass로 작성하면 알아서 css로 변환되어 나타난다.

 

sass에는 Nesting, mixin, 변수 활용, & 연산자 등 여러 유용한 기능이 있지만

그 중 가장 헷갈렸던 mixin에 대해 포스팅 해보려고 한다. 

@mixin

자주 사용하는 요소들은 @mixin으로 묶어줄 수 있다.

예를 들어

 display: flex;
 align-items: center;
 justify-content: center;

이 세 개는 가운데 정렬을 해주기 위해 자주 쓰니 묶어서 @mixin으로 불러오면 

코드가 한결 짧아질 것이다!

---

나 같은 경우에는

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

@mixin의 이름을 layout으로 해서 묶어줬다.

align-items의 기본값을 center로 해줬고

justify-content의 기본값도 center로 해줬다.

 

이 @mixin을 쓰고 싶을 때는

@include layout으로 불러오면 된다.

---

그런데

display: flex;
align-items: center;
justify-content: space-arourd;

이렇듯

justify-content의 값이 center가 아닌 space-around면 어떻게 불러올까?

@include layout($justify : space-around);

이렇게 불러오면 된다.

 

그럼 

display: flex;
align-items: flex-start;
justify-content: center;

align-items의 값이 center가 아닌 flex-start라면?

@include layout($align : flex-start);

이렇게 불러오면 된다.

 

그럼..

display: flex;
justify-content: center;

이렇듯 align-items이 아예 없다면..?

@include layout($align : null);

이렇게 null값을 주면 된다!

 

정말 마지막으로 

display: flex;
justify-content: space-between;

align-items도 아예 없고 justify-content의 값이 center가 아닌 space-between이라면?

@include layout($align : null, $justify : space-between);

이렇게 하면 된다!

---

 

참고한 사이트 

https://www.biew.co.kr/entry/Sass%E3%86%8DSCSS-SASS-%EB%AC%B8%EB%B2%95-5%ED%8E%B8-mixin-extend-import

[SassㆍSCSS] SASS 문법 6편 - @mixin, @extend, @import

https://sass-lang.com/guide

Sass: Sass Basics