css - 如何在 sass 中使用 map-deep-get
问题描述
我正在关注这篇文章https://www.sitepoint.com/better-solution-managing-z-index-sass/ 但是缺少一个链接,它没有将 map-deep-get 函数链接回 z功能,并且演示不起作用。我试过搜索但没有找到任何帮助。
$z-layers: (
"goku": 9001,
"shoryuken": 8000,
"modal": (
"base": 500,
"close": 100,
"header": 50,
"footer": 10
),
"default": 1,
"below": -1,
"bottomless-pit": -9000
);
@function map-deep-get($map, $keys...) {
@each $key in $keys {
$map: map-get($map, $key);
}
@return $map;
}
@function z($layer) {
@if not map-has-key($z-layers, $layer) {
@warn "No layer found for `#{$layer}` in $z-layers map. Property omitted.";
}
@return map-get($z-layers, $layer);
}
解决方案
地图深度获取
句法
Dart Sass syntax:
@use "sass:list";
@use "sass:map";
@use "sass:meta";
@function map-deep-get($map, $keys...) {
$scope: $map; $i: 1;
@while (meta.type-of($scope) == map) and ($i <= list.length($keys)) {
$scope: map.get($scope, list.nth($keys, $i));
$i: $i + 1;
}
@return $scope;
}
Lib Sass syntax:
@function map-deep-get($map, $keys...) {
$scope: $map; $i: 1;
@while (type-of($scope) == map) and ($i <= length($keys)) {
$scope: map-get($scope, nth($keys, $i));
$i: $i + 1;
}
@return $scope;
}
如何使用:
此map-deep-get
函数让您可以访问任意深度嵌套的值,也可以用作常规map-get
函数。
$exampleMap: (
"foo": foo,
"bar": (
"barfoo": barfoo,
"barbar": (
"barbarfoo": barbarfoo,
),
),
);
Codepen Demo
非嵌套项:
@debug map-deep-get($exampleMap, "foo") //foo
嵌套项目:
@debug map-deep-get($exampleMap, "bar", "barfoo") //barfoo
嵌套地图:
@debug map-deep-get($exampleMap, "bar", "barbar") //("barbarfoo": barbarfoo)
嵌套嵌套项:
@debug map-deep-get($exampleMap, "bar", "barbar", "barbarfoo") //barbarfoo
推荐阅读
- python - 选择排序不打印正确的结果
- excel - 无法在 Microsoft Excel 中插入填充地图数据透视图
- javascript - 使用反应钩子和反应路由器导航消失的组件
- node.js - Multer 不接收表单数据
- excel - 如何在 excel 中将垂直 2 列列表转换为水平列表,保持分组?
- testing - 使用nestjs框架时如何编写单元测试用例?
- rust - actix-web 中“扩展”的作用是什么?
- javascript - React:未加载本地样式表,因为它的 MIME 类型“text/html”不是“text/css”
- css - 为什么具有隐藏溢出的元素的 scrollHeight 属性不正确?
- google-sheets - 使用 REGEXREPLACE 在 Google 表格中的值中插入逗号