SCSS ( sass ) @each 활용

기존에 tailwindcss를 잘 활용하다가 제로베이스 에서 다시 처음부터 배우면서 기본 부터 시작한다는 마인드로 다시 공부하는중에 scss를 통한 funtional css를 @each를 활용하여 구현하는걸 목표로 잡고 활용해 보고자 한다.!

간단하게 순서를 정하자면 다음과 같습니다!

1. scss map으로 색상 변수를 선언하기!
2. @each를 활용하여 css 작성하기!

1. scss map 으로 색상 변수 선언하기!

$color-template: (
	gray: (
		50: #f9fafb,
		100: #f3f4f6,
		200: #e5e7eb,
		300: #d1d5db,
        400: #9ca3af,
		500: #6b7280,
		600: #4b5563,
		700: #374151,
		800: #1f2937,
		900: #111827,
	),
);

2. @each를 활용하여 css 작성하기!

css 변수 형태로 @each 활용하기!

css 의 변수는 다음과 같은 형태를 사용합니다!

:root{
	--color-gray-50:#f9fafb;
}

위가 같은 형태로 만들기 위해서는 다음과 같이 scss를 작성 하면 됩니다.

/* css var type */
:root {
	@each $base-color, $base-color-map in $color-template {
		// 내부에서 한번 더 @each를 해야 gray 내부의 key:value를 가져 올 수 있습니다.
		@each $color-key, $color-value in $base-color-map {
			--color-#{$base-color}-#{$color-key}: #{$color-value};
		}
	}
}

output

/* css var type */
:root {
	--color-gray-50: #f9fafb;
	--color-gray-100: #f3f4f6;
	--color-gray-200: #e5e7eb;
	--color-gray-300: #d1d5db;
	--color-gray-400: #9ca3af;
	--color-gray-500: #6b7280;
	--color-gray-600: #4b5563;
	--color-gray-700: #374151;
	--color-gray-800: #1f2937;
	--color-gray-900: #111827;
}

tailwindcss 형태로 @each 활용하기

tailwindcss의 경우 class 명 자체가 functional하게 선언되어 있다.!

/* 배경 색의 경우 */
.bg-gray-50{
	backgroud-color:#f9fafb;
}
/* 글자 색의 경우 */
.text-gray-50{
	color:#f9fafb;
}

위가 같은 형태로 만드려면 다음과 같이 scss를 작성 하면 됩니다!

/* 하나의 each문 안에 다 작성하면 output css가 보기 힘들어 져서 분리해서 작성했습니다 */
/* funtional css bg */
@each $base-color, $base-color-map in $color-template {
	@each $color-key, $color-value in $base-color-map {
		.bg-#{$base-color}-#{$color-key} {
			background-color: #{$color-value};
		}
	}
}
  
/* funtional css text */
@each $base-color, $base-color-map in $color-template {
	@each $color-key, $color-value in $base-color-map {
		.text-#{$base-color}-#{$color-key} {
			color: #{$color-value};
		}
	}
}

output

/* funtional css bg */
.bg-gray-50 {
	background-color: #f9fafb;
}
  
.bg-gray-100 {
	background-color: #f3f4f6;
}
  
.bg-gray-200 {
	background-color: #e5e7eb;
}

/* ...
	생략 
... */

/* funtional css text */
.text-gray-50 {
	color: #f9fafb;
}
  
.text-gray-100 {
	color: #f3f4f6;
}
  
.text-gray-200 {
	color: #e5e7eb;
}
/* ...
	생략 
... */

마치며..

처음 scss를 공부할 때는 nesting구조 를 가진 css라 생각하면서 배웠지만 $변수 선언, @for, @each, @map, @if, @else등등 다양한 기능을 바탕으로 여러가지 기능들을 쉽게 구현 하며, 이를 활용 하는 방법은 무궁무진하다고 느꼈습니다!