[SCSS] @use 'sass:map';

 

???

끝없이 모르는게 나온댜...............

혼미해

 

 

@use 'sass:map';

- Sass(SCSS)에서 제공하는 내장 모듈을 불러오는 코드

- 맵(map) 관련 유틸리티 함수를 활용 가능

- 예전에는 바로 map.get()으로 사용할 수 있었지만, 최근부터는 @use 'sass:map'; 선언 후 사용 가능

 

 

📌 1. Sass의 map이란?

- JavaScript 객체(Object)와 비슷한 데이터 구조
- Key-Value 형태로 데이터를 저장하고, 특정 값을 쉽게 사용 가능

 

✔ Sass map 예제 ( map.get($map, $key) )

@use 'sass:map';

$colors: (
  primary: #007bff,
  border: #ccc,
);

body {
  background-color: map.get($colors, primary);
  border: 1px solid map.get($colors, border);
}

 

=> $theme-colors라는 맵을 만들고, map.get()을 사용해 primary와 border 색상을 가져옴

 

👇 결과 👇

body {
  background-color:#007bff; border:1px solid #ccc;
}

 

 

📌 2. Sass:map에서 자주 쓰는 함수

함수	설명
map.get($map, $key)	특정 키 값 가져오기
map.merge($map1, $map2)	두 개의 맵 합치기
map.keys($map)	맵의 모든 키 리스트 가져오기
map.values($map)	맵의 모든 값 리스트 가져오기

✔  map.merge($map1, $map2) 예제

@use "sass:map";

$base-colors: (
  primary: #ff0000,
  secondary: #00ff00
);

$extra-colors: (
  success: #28a745,
  warning: #ffc107
);

// 두 개의 맵을 합치기
$merged-colors: map.merge($base-colors, $extra-colors);

.alert {
  background-color: map.get($merged-colors, warning);
}

 

=> map.merge() 를 사용하여 $merged-colors 변수를 통해 primary, secondary, success, warning 을 같이 사용 가능

 

👇 결과 👇

.alert {
  background-color: #ffc107;
}

 

✔  map.keys($map) 예제

@use "sass:map";

$colors: (
  primary: #007bff,
  secondary: #6c757d,
  success: #28a745
);

// 모든 키를 변수로 저장
$color-keys: map.keys($colors);

// 디버깅용 (Sass 내부에서 사용)
@debug $color-keys; // 출력: primary, secondary, success

 

=> @debug를 사용하면 SCSS 컴파일 시 키 목록이 출력됨
=> 결과: "primary, secondary, success" 리스트를 반환

 

👩🏻❓❓ 언제 사용?

=> 특정 맵($colors, $sizes)에서 모든 키를 반복문(@each)으로 순회할 때

=> 스타일과 클래스를 자동으로 생성하고 싶을 때

@use "sass:map";

$theme-colors: (
  primary: #007bff,
  secondary: #6c757d,
  success: #28a745
);

// 모든 키 가져오기
@each $key in map.keys($theme-colors) {
  .btn-#{$key} {
    background-color: map.get($theme-colors, $key);
  }
}

 

👇 결과 👇

.btn-primary {
  background-color: #007bff;
}
.btn-secondary {
  background-color: #6c757d;
}
.btn-success {
  background-color: #28a745;
}

 

✔  map.values($map) 예제

@use "sass:map";

$colors: (
  primary: #007bff,
  secondary: #6c757d,
  success: #28a745
);

// 모든 값 가져오기
$color-values: map.values($colors);

@debug $color-values; // 출력: #007bff, #6c757d, #28a745

 

=> 결과: #007bff, #6c757d, #28a745 리스트 반환.

 

👩🏻❓❓ 언제 사용?

=> 특정한 색상이나 값을 리스트 형태로 변환해서 활용할 때

=> 특정 조건(@if)을 만들거나, 비교 연산 활용 할 때

@use "sass:map";

$alert-colors: (
  error: red,
  warning: orange,
  success: green
);

$alert-values: map.values($alert-colors);

// 만약 특정 색상이 존재하면 적용
@each $color in $alert-values {
  @if $color == red {
    .alert-error {
      font-weight: bold;
    }
  }
}

 

👇 결과 👇

.alert-error {
  font-weight: bold;
}