어쩌다 알게 된 ƪ(•̃͡•̃͡ ƪ

[Bootstrap] @use 'sass:list'; / Dart Sass(모듈 시스템) 사용법 본문

CSS/Bootstrap

[Bootstrap] @use 'sass:list'; / Dart Sass(모듈 시스템) 사용법

비니_ 2025. 4. 8. 20:44
728x90

 

 

@use 'sass:list';
@function map-deep-set($map, $keys, $value) {
	$maps: ($map);
	$result: null;
    
    @for $i from length($maps) through 1 {
        $current-map: list.nth($maps, $i);
        $current-key: list.nth($keys, $i);
        $current-val: if($i == list.length($maps), $value, $result);
        $result: map.merge(
            $current-map,
            (
                $current-key: $current-val,
            )
        );
    }
}

 

📚 푸는 과정 

$maps: ((), (), ()) → 빈 map 3개
$keys: (a, b, c)
$value: 100

$current-key = c
$current-val = 100
$result = (c: 100)


$current-key = b
$current-val = (c: 100)
$result = (b: (c: 100))


$current-key = a
$current-val = (b: (c: 100))
$result = (a: (b: (c: 100)))


// 최종 결과
(a: (b: (c: 100)))

 

 

=> map-deep-set(값, 값, 값) 이렇게 쓰이면 동작 설명 가능한데, 해당 프로젝트에서는 선언만 해놓고 사용하고 있지 않음

728x90
Comments