이 작동하는 방법?
$app: (
"navbar": (
"title": (
"font-size": "14px",
"color": "red"
),
"link": (
"font-weight": "700",
"text-align": "center"
)
),
"footer": (
"button": (
"font-size": "11px",
"color": "green"
)
)
);
:root {
@each $name, $tag, $var, $value in $app {
--#{$name}-#{$tag}-#{$var}: $value;
}
}
나는 이것을 기대한다
:root {
--navbar-title-font-size: 14px;
--navbar-title-color: red;
--navbar-link-font-weight: 700;
--navbar-link-text-align: center;
--footer-button-font-size: 11px;
--footer-button-color: green;
}
작동하도록이 코드를 수정하려면 어떻게해야합니까? 여러 값을 관리하는 방법을 모르겠습니다. 여기에서 3 시간 정도 해봤는데 합치 지 못해서 뭔가 놓친 것 같아요.
다음과 같이 일련의 루프를 수행해야합니다.
:root {
@each $name, $tags in $app {
@each $tag, $vars in $tags {
@each $var, $val in $vars {
--#{$name}-#{$tag}-#{$var}: #{$val};
}
}
}
}
@eachdestructuring 구문을 사용하려는 것처럼 보이지만 맵 내의 맵이 아닌 내부 목록에서만 작동합니다.
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다