-
[TIL] Today I Learned : React sass - @mixin프론트엔드 개발자가 될거야./react 2022. 7. 5. 17:44css..웹이 발전하면서 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);
이렇게 하면 된다!
참고한 사이트
'프론트엔드 개발자가 될거야. > react' 카테고리의 다른 글
instagram 클론코딩 : westagram 총정리👩🏻💻 (0) 2022.07.17 Mock data (0) 2022.07.15 useEffect와 side Effect (0) 2022.07.13 map 함수 적용시 key props를 부여하는 이유 (0) 2022.07.10 instagram 댓글 기능 구현 (0) 2022.07.10