如何在 SCSS 中直接提取变量组中的特定值？

目前米云上已经有很多关于文章的文章了，自己在初次阅读这些文章中，也见识到了很多学习思路；那么本文《如何在 SCSS 中直接提取变量组中的特定值？》，也希望能帮助到大家，如果阅读完后真的对你学习文章有帮助，欢迎动动手指，评论留言并分享~

如何在 SCSS 中直接提取变量组中的特定值？插图

从 scss 变量组直接提取值

在 scss 中，可以通过变量组定义一组相关的值，使用 @each 循环遍历这些值并生成具体的样式。但是，是否有办法直接提取变量组中的特定值呢？

答案是肯定的，可以使用 map-get() 函数，它的语法如下：

map-get(map, key)

其中：

按照题中的例子，给出如下代码段：

$spacer: (
  sm: 5px,
  base: 10px,
  lg: 15px,
);

.MyClass {
  margin-top: map-get($spacer, "sm");
}

这里，map-get($spacer, “sm”) 返回了变量组 $spacer 中键为 “sm” 的值，也就是 5px。这样，就可以直接在样式中使用变量组中的特定值了。

到这里，我们也就讲完了《如何在 SCSS 中直接提取变量组中的特定值？》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注米云公众号，带你了解更多关于的知识点！

近期文章