[SCSS] mixin 으로 padding, margin 값 부여하기 (like tailwindcss)

tailwindcss 를 쓰고 싶었지만

프로젝트 보안상 사용할 수 없어서

mixin 으로 tailwind 따라하기

 

먼저 :root 에 --spacing 변수 선언

body 의 font-size 16px 기준으로 4px 부여

(tailwindcss 는 4배수 그리드 기준)

:root {
	--spacing: 0.25rem;
}

 

 

mixin 제작

@mixin p-($value) {
	padding:calc(var(--spacing) * #{$value});
}

 

 

사용할 때는

.test {
	@include p-(4);
}

 

이러면

0.25rem * 4 = 16px 이 나오게 됨

 

tailwindcss 랑 똑같이

pt, pb, pl, pr, px, py 도 다 만들어주고

 

margin 도 마찬가지로 다 만들어주기