SASS의 맵(Map)
이 글에서는 SASS의 맵(Map)에 대해 설명합니다.
SASS 맵의 기본부터 고급 사용법까지 설명하고, 실용적인 예시도 제공합니다.
YouTube Video
SASS의 맵(Map)
SASS의 맵(Map)이란?
SASS의 맵은 키-값 쌍을 저장하는 데이터 구조로, JavaScript의 객체나 Python의 딕셔너리와 유사합니다. SASS에서 맵을 사용하면 복잡한 스타일을 간결하게 관리할 수 있으며 유지보수성이 향상됩니다.
맵(Map)의 기본 문법
SASS에서 맵은 () 괄호를 사용하여 정의합니다. 문법은 다음과 같습니다:.
1$map-name: (
2 key1: value1,
3 key2: value2,
4 key3: value3
5);예를 들어, 컬러 테마를 관리할 맵을 만들고 싶을 때는 아래와 같이 정의할 수 있습니다:.
1$colors: (
2 primary: #3498db,
3 secondary: #2ecc71,
4 danger: #e74c3c
5);맵에서 값 가져오기
SASS에서는 map.get() 함수를 사용해 맵에서 값을 가져올 수 있습니다.
사용 예시:
1@use "sass:map";
2
3$colors: (
4 primary: #3498db,
5 secondary: #2ecc71
6);
7
8.button {
9 background-color: map.get($colors, primary);
10}출력:
1.button {
2 background-color: #3498db;
3}- 이 코드는
$colors맵에서primary컬러 값을 가져와 버튼의 배경색으로 적용합니다.
맵에 키와 값 설정하기
map.set() 함수를 사용하면 지정한 키에 새로운 값을 할당할 수 있습니다. 키가 이미 존재하면 해당 값이 덮어쓰여집니다.
사용 예시
1@use "sass:map";
2
3$colors: (
4 primary: #3498db,
5 secondary: #2ecc71
6);
7
8// set danger color
9$updated-colors: map.set($colors, danger, #e74c3c);
10
11.button-danger {
12 background-color: map.get($updated-colors, danger);
13}- 이 코드는 맵에
danger키를 추가한 뒤, 해당 값을 버튼의 배경색으로 설정합니다.
출력
1.button-danger {
2 background-color: #e74c3c;
3}맵에서 키 제거하기
map.remove() 함수를 사용하면 맵에서 특정 키와 그 값을 제거할 수 있습니다.
사용 예시
1@use "sass:map";
2
3$colors: (
4 primary: #3498db,
5 secondary: #2ecc71,
6 danger: #e74c3c
7);
8
9// remove danger color
10$reduced-colors: map.remove($colors, danger);
11
12.button-primary {
13 background-color: map.get($reduced-colors, primary);
14}
15
16.button-danger {
17 background-color: map.get($reduced-colors, danger);
18}- 이 코드는 맵에서
danger키를 제거하므로,button-danger의 배경색은null이 됩니다.
출력
1.button-primary {
2 background-color: #3498db;
3}맵에 키와 값 추가하기
map.merge() 함수를 사용하면 기존 맵에 새로운 키와 값을 추가할 수 있습니다.
사용 예시
1@use "sass:map";
2
3$colors: (
4 primary: #3498db,
5 secondary: #2ecc71
6);
7
8$extended-colors: map.merge($colors, (danger: #e74c3c));
9
10.button-danger {
11 background-color: map.get($extended-colors, danger);
12}- 이 코드는 기존 SASS 맵에
danger키를 추가하고 해당 색상을 버튼의 배경색으로 지정합니다.
출력
1.button-danger {
2 background-color: #e74c3c;
3}맵에 여러 키와 값 추가하기
map.merge() 함수를 사용하면 기존 맵에 여러 개의 새로운 키와 값을 한 번에 추가할 수 있습니다.
사용 예시
1@use "sass:map";
2
3$colors: (
4 primary: #3498db,
5 secondary: #2ecc71
6);
7
8$extended-colors: map.merge($colors, (
9 danger: #e74c3c,
10 warning: #f39c12,
11 info: #8e44ad
12));
13
14.button-danger {
15 background-color: map.get($extended-colors, danger);
16}- 이 코드는 기존 SASS 맵에 여러 개의 키와 값을 한 번에 추가합니다.
맵에서 키 존재 여부 확인하기
map.has-key() 함수를 사용하면 특정 키가 맵에 존재하는지 확인할 수 있습니다.
사용 예시
1@use "sass:map";
2
3$colors: (
4 primary: #3498db,
5 secondary: #2ecc71
6);
7
8@debug map.has-key($colors, primary); // true
9@debug map.has-key($colors, danger); // false맵에서 모든 키나 값 가져오기
모든 키 가져오기
map.keys() 함수를 사용하면 모든 키를 가져올 수 있습니다.
1@use "sass:map";
2
3$colors: (
4 primary: #3498db,
5 secondary: #2ecc71
6);
7
8@debug map.keys($colors); // (primary, secondary)모든 값 가져오기
map.values() 함수를 사용하면 모든 값을 가져올 수 있습니다.
1@use "sass:map";
2
3$colors: (
4 primary: #3498db,
5 secondary: #2ecc71
6);
7
8@debug map.values($colors); // (#3498db, #2ecc71)맵 반복 처리하기
SASS에서는 @each 지시어로 맵을 반복할 수 있습니다.
사용 예시
1$colors: (
2 primary: #3498db,
3 secondary: #2ecc71,
4 danger: #e74c3c
5);
6
7@each $name, $color in $colors {
8 .color-#{$name} {
9 background-color: $color;
10 }
11}- 이 코드는 SASS 맵의 각 키와 값을 반복해 각 색상별 클래스를 자동으로 생성합니다.
출력
1.color-primary {
2 background-color: #3498db;
3}
4
5.color-secondary {
6 background-color: #2ecc71;
7}
8
9.color-danger {
10 background-color: #e74c3c;
11}중첩 맵 다루기
맵은 중첩 구조를 가질 수 있습니다. 이 경우에는 중첩된 map.get() 함수를 사용합니다.
사용 예시
1@use "sass:map";
2
3$themes: (
4 light: (
5 background: #ffffff,
6 text: #000000
7 ),
8 dark: (
9 background: #000000,
10 text: #ffffff
11 )
12);
13
14body {
15 background-color: map.get(map.get($themes, light), background);
16 color: map.get(map.get($themes, light), text);
17}- 이 코드는 중첩된 SASS 맵에서
light테마의 배경색과 글자색을 가져와body에 적용합니다.
출력
1body {
2 background-color: #ffffff;
3 color: #000000;
4}맵 활용 예시: 반응형 디자인
맵을 사용하면 미디어 쿼리와 반응형 디자인을 손쉽게 관리할 수 있습니다.
사용 예시
1$breakpoints: (
2 small: 480px,
3 medium: 768px,
4 large: 1024px
5);
6
7@each $label, $size in $breakpoints {
8 @media (max-width: $size) {
9 .container-#{$label} {
10 width: 100%;
11 }
12 }
13}- 이 코드는 SASS 맵을 이용해 각 브레이크포인트별 반응형 컨테이너 클래스를 자동으로 생성합니다.
출력
1@media (max-width: 480px) {
2 .container-small {
3 width: 100%;
4 }
5}
6
7@media (max-width: 768px) {
8 .container-medium {
9 width: 100%;
10 }
11}
12
13@media (max-width: 1024px) {
14 .container-large {
15 width: 100%;
16 }
17}결론
SASS 맵은 스타일시트를 체계적으로 구성할 수 있게 해주며, 유연성과 재사용성을 높이는 강력한 도구입니다. 값 관리, 반복 처리, 반응형 디자인 구현 등 다양한 상황에서 활용할 수 있습니다.
위의 기사를 보면서 Visual Studio Code를 사용해 우리 유튜브 채널에서 함께 따라할 수 있습니다. 유튜브 채널도 확인해 주세요.