[SCSS] SCSS Map

Map

• SCSS 데이터 타입 중 하나로 키(key)와 값(value) 쌍으로 이루어진 데이터 구조
• 자바스크립트의 객체({key: value})와 비슷한 개념
• 반복문과 결합하면 반복적인 CSS 생성에 매우 편리
• 리스트와 달리 값을 키로 접근할 수 있고 데이터 접근이 명확하고 실무에서 재사용성이 높음

기본 문법

• 키와 값은 콜론(:)으로 구분
• 각 쌍은 쉼표(,)로 구분
• $map-name : 맵 변수 이름
• key : 문자열처럼 쓰지만, 따옴표 없어도 됨
• value : 숫자, 색상, 문자열 등 SCSS에서 가능한 값
• 괄호 ()로 묶고, 각 쌍은 쉼표 ,로 구분

/* [문법] */
$map: (
  키1: 값1,
  키2: 값2,
  키3: 값3
);

$colors: (
  primary: #3498db,
  secondary: #2ecc71,
  danger: #e74c3c
);

@each $name, $color in $colors {
  .text-#{$name} {
    color: $color;
  }
}

/* 컴파일 결과 */
.text-primary { color: #3498db; }
.text-secondary { color: #2ecc71; }
.text-danger { color: #e74c3c; }

---

Map 주요 함수

map-get($map, $key)

• Map에서 특정 키(key)에 해당하는 값을 가져옴

/* [문법] */
map-get(맵변수, 키)

$colors: (
  primary: #3498db,
  secondary: #2ecc71
);

$main-color: map-get($colors, primary); // #3498db

중첩 Map 접근 방법

• Map 안에 Map이 있을 때는 map-get을 중첩해서 사용

/* [문법] */
map-get(map-get(맵변수, 상위키), 하위키)

$theme: (
  light: (
    background: #fff,
    text: #000
  ),
  dark: (
    background: #000,
    text: #fff
  )
);

$bg-color: map-get(map-get($theme, light), background); // #fff

---

map-merge($map1, $map2)

• 두 개의 Map을 합쳐서 새로운 Map을 반환
• 겹치는 키가 있으면 뒤에 있는 Map의 값으로 덮어씌워짐

/* [문법] */
map-merge(기존맵, 새맵)

$map1: (a: 1, b: 2);
$map2: (b: 3, c: 4);

$new-map: map-merge($map1, $map2); // (a: 1, b: 3, c: 4)

---

map-keys($map)

• Map의 모든 키를 리스트 형태로 반환

/* [문법] */
map-keys(맵변수)

$colors: (primary: #3498db, secondary: #2ecc71);

$keys: map-keys($colors); // (primary, secondary)

---

map-values($map)

• Map의 모든 값을 리스트 형태로 반환

/* [문법] */
map-values(맵변수)

$colors: (primary: #3498db, secondary: #2ecc71);

$values: map-values($colors); // (#3498db, #2ecc71)

---

map-has-key($map, $key)

 

• Map에 특정 키가 존재하는지 확인
• 존재하면 true, 없으면 false 반환.

/* [문법] */
map-has-key(맵변수, 키)

$colors: (primary: #3498db);

map-has-key($colors, primary); // true
map-has-key($colors, secondary); // false

---

map-remove($map, $key...)

• Map에서 특정 키를 제거한 새 Map을 반환
• 여러 개 키도 제거 가능.

/* [문법] */
map-remove(맵변수, 키1, 키2, ...)

$colors: (primary: #3498db, secondary: #2ecc71, danger: #e74c3c);

$new-colors: map-remove($colors, danger, secondary); // (primary: #3498db)

---