w3.css
공식 레퍼런스는 SCSS 문법을 기준으로 모든 문법을 설명하고 예시를 보여주므로 SCSS 문법으로 작성한 Sass를 사용하자.
맵 함수
Sass에서 맵 데이터 유형은 하나 이상의 키/값 쌍을 나타낸다.
⭐ 목록 함수를 맵과 함께 사용할 수도 있다. 맵은 두 개의 요소가 있는 리스트로 처리된다.
Sass 맵은 불변하다(변경할 수 없다).
따라서 맵을 반환하는 맵 함수는 새 맵을 반환하고 원래 맵을 변경하지 않는다.
다음 표는 Sass의 모든 맵 함수를 나열한다.
| 기능 | 설명 | 예시 |
|---|---|---|
| map-get(맵, 키) | 지정된 키에 대한 값을 반환한다. | $font-sizes: (“small”: 12px, “normal”: 18px, “large”: 24px) map-get($font-sizes, “small”) 결과: 12px |
| map-has-key(맵, 키) | 맵에 지정된 키가 있는지 확인한다. true 또는 false를 반환한다. | $font-sizes: (“small”: 12px, “normal”: 18px, “large”: 24px) map-has-key($font-sizes, “big”) 결과: false |
| map-keys(맵) | 맵의 모든 키 목록을 반환한다. | $font-sizes: (“small”: 12px, “normal”: 18px, “large”: 24px) map-keys($font-sizes) 결과: “small”, “normal”, “large” |
| map-merge(맵1, 맵2) | 맵2를 맵1의 끝에 추가한다. | $font-sizes: (“small”: 12px, “normal”: 18px, “large”: 24px) $font-sizes2: (“x-large”: 30px, “xx-large”: 36px) map-merge($font-sizes, $font-sizes2) 결과: “small”: 12px, “normal”: 18px, “large”: 24px, “x-large”: 30px, “xx-large”: 36px |
| map-remove(맵, 키들…) | 지정된 키를 맵에서 제거한다. | $font-sizes: (“small”: 12px, “normal”: 18px, “large”: 24px) map-remove($font-sizes, “small”) 결과: (“normal”: 18px, “large”: 24px) map-remove($font-sizes, “small”, “large”) 결과: (“normal”: 18px) |
| map-values(맵) | 맵의 모든 값 목록을 반환한다. | $font-sizes: (“small”: 12px, “normal”: 18px, “large”: 24px) map-values($font-sizes) 결과: 12px, 18px, 24px |
참고
W3C School - Sass Map Functions
Sass - Sass Basics
