Notice
Recent Posts
Recent Comments
Link
250x250
| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | ||||
| 4 | 5 | 6 | 7 | 8 | 9 | 10 |
| 11 | 12 | 13 | 14 | 15 | 16 | 17 |
| 18 | 19 | 20 | 21 | 22 | 23 | 24 |
| 25 | 26 | 27 | 28 | 29 | 30 | 31 |
Tags
- window 정책변경
- minwidth
- npm start
- Git clone
- 단어단위로떨어지기
- 정적객체
- 의존성문제
- npm install
- 아이콘사용법
- 동적객체
- maxwidth
- react npm install
- fontawesome
- 플러그인
- MediaQuery
- slickslider
- googleicon
- node 오류
- 이미지반응형
- 글자들여쓰기
- vscode git clone
- npm install 문제
- 그누보드반응형
- git lab clone
- 웹아이콘
- node설치
- package.json
- XEIcon
- legacy-peer
- owlcarousel
Archives
- Today
- Total
어쩌다 알게 된 ƪ(•̃͡•̃͡ ƪ
[Bootstrap] @use 'sass:list'; / Dart Sass(모듈 시스템) 사용법 본문
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
'CSS > Bootstrap' 카테고리의 다른 글
| [Bootstrap] SCSS 변수 찾기, rfs() 가 뭔가? (1) | 2025.04.09 |
|---|---|
| [Bootstrap] @use 'sass:map'; map.get(), map-get(), map-deep-get() (0) | 2025.04.08 |
| [Bootstrap] $self: &; 중첩 구조에서의 사용 #{$self} (0) | 2025.04.08 |
| [Bootstrap] &self: &; @mixin 사용 scss (0) | 2025.04.07 |
| [React] Bootstrap scss v5.1.3 (1) | 2025.04.07 |
Comments