[Bootstrap] @use 'sass:map'; map.get(), map-get(), map-deep-get()

 

@use 'sass:map';

.navigation {
    &-menu {
        display: flex;
        flex-wrap: wrap;

        #{ $self } {
            @include padding((map.get($navigation, padding-y) * 0.5) 0);

            width: map-deep-get($header, dropdown, width);
            border: none;
            border-radius: map-deep-get($header, dropdown, border-radius);
            box-shadow: $box-shadow;
        }

        #{ $self }-link-extra {
            @include margin-left(map.get($navigation, margin-x));
        }
    }
}

 

❓❓❓

 

@include padding((map.get($navigation, padding-y) * 0.5) 0);

=> $navigation이라는 map(객체) 안에서 'padding-y'라는 key의 value를 가져와라

 

가정:

$navigation: (
  padding-y: 2rem,
  padding-x: 1.5rem
); 

 

결과: padding: (2rem * 0.5) 0; => padding: 1rem 0;

 

문법	사용 조건	설명
map-get()	예전 스타일(SCSS 기본)	바로 사용 가능
map.get()	Dart Sass + 모듈 시스템	@use "sass:map"; 선언 필요
map-deep-get()	커스텀 함수	이전 작업자가 만들어 놓은 유틸 함수 👩🏻 해당 함수 정의 부분을 찾으려면 @function map-deep-get 로 검색

 

 

❓❓❓

map-deep-get($header, dropdown, width)

이전 작업자가 커스텀해 놓은 함수

@function map-deep-get($map, $keys...) {
	@each $key in $keys {
		$map: map.get($map, $key);
	}

	@return $map;
}

 

해당 함수 사용 예시)

$theme: (
  header: (
    dropdown: (
      width: 200px,
      border-radius: 8px
    )
  )
);

 

사용 방법)

map-deep-get($map, key1, key2, key3, ...)

map-deep-get($theme, header, dropdown, width) // → 200px
map-deep-get($theme, header, dropdown, border-radius) // → 8px