问题标签 [sass-maps]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
4702 浏览

sass - SASS:检查变量是否为映射

is-map($some_variable)SASS中有类似的东西吗?

我曾尝试查看文档,但那里没有。

0 投票
1 回答
5682 浏览

css - SASS:如何使用循环生成地图

我的目标是生成一个 SASSmap来存储存储在以下地图中的颜色变体:

到目前为止,我正在使用 a@function来检索这些变体:


我期望能够生成的地图如下所示:


然而,我已经尝试应用的循环看起来像这样:

然而,我天真地相信它可以在地图本身内部工作。


可以更容易回答这个疑问的问题

  • 如何将值添加到 SASS 映射(函数),(键:值)?
  • map-merge/map-set的基本用法 ( @return map-merge($map, $new))

严格地说,我在下面寻找:

但是,它返回以下错误:

结论

很长一段时间过去了,如果我能与其他人分享我的解决方案,我会很好。

我创建了一个存储库来存储此问题解决的结果,https://github.com/vladimirlisovets/SASS-Color-Palettes

希望它对某人有用,可以激发更好的东西。

干杯。

0 投票
1 回答
100 浏览

sass - 在 SASS 映射中为模块化比例 ms-range 创建值

我想做的是

  • 循环遍历地图 $breakpoints,
  • 拉出每个断点的最小值,
  • 根据每个计算一个 em 值,
  • 然后将这些用于全局地图 $ms-range

此代码需要生成一个如下所示的变量:

我无法获得返回我想要的格式的函数。也许是地图扩展?!我不知道。我需要一个SASS大师!

萨斯:

SASSMEISTER 链接: http: //www.sassmeister.com/gist/700f0721fd7940c84435cb1b5210f5d7

0 投票
2 回答
123 浏览

function - 减少 Sass 函数中的重复代码

我正在开发一个使用大量 Sass 来创建可维护且易于使用的代码库的 HTML 样板。其中一部分是一些功能:

然后这些函数在一些 mixin 中被调用,如下所示:

虽然这工作得很好,但我不喜欢我在函数中重复大量代码的事实。我尝试编写一个接收地图名称作为参数的通用函数,但我不能在 map-get() 中使用插值。

有没有办法让函数代码更加优雅和尽可能 DRY?

我很欣赏任何见解。干杯!

0 投票
1 回答
94 浏览

sass - 将嵌套的 sass 地图隔离到新地图中

如何将嵌套的 sass 地图隔离到新地图中?例如,我有这样的 sass 地图:

然后我需要在循环之后隔离每个映射,因为我的其他 mixin 需要映射作为它的参数。

0 投票
1 回答
225 浏览

css - 如何在 SASS 中创建一个可以接受键并返回所有祖先列表的递归函数?

我正在尝试创建一个get-ancestors()函数,该函数接受$key并返回列表中的所有祖先,如下所示:

调用get-ancestors('small-hollow-button')应该返回('small-button', 'button', 'hollow-button', 'button')

然后我想删除重复的祖先,但我应该能够弄清楚。任何帮助将非常感激。

编辑:我尝试了很多东西,我得到的最接近的是这样的:

编辑:感谢您的回答,这是我的最终设置和扩展示例:

0 投票
1 回答
116 浏览

sass - 合并多个 sass 映射返回类型字符串而不是映射

与这个想法类似,我创建了一个辅助方法来合并多个 sass 映射。 https://stackoverflow.com/a/30740182/6413673

我的助手代码如下:

我的问题是,它没有返回地图,而是返回了一个字符串。

输出是:

关于我的辅助方法有什么问题的任何想法?

0 投票
1 回答
117 浏览

sass - 自动生成的 sass 地图

我正在尝试生成一个自动化系统来定义 SASS 中的颜色。

我有一张名为 $brand-colors 的颜色地图,我希望这张地图的颜色用于在第二张地图中生成色调和阴影,无论 $brand-colors 中有多少颜色。

这就是我到达的地方:

使用上面的代码,我从终端得到这个结果:

简而言之,只取了第一个键值对,我不明白为什么。有人可以给我答案吗?

0 投票
1 回答
360 浏览

css - 根据变量使用特定的 Sass 映射

我遇到了一个问题,我更容易定义两个可以在使用单个变量之间轻弹的基本地图(对于基本、浅色/深色主题来说似乎更容易)

https://codepen.io/anon/pen/bLwNaW

我正在尝试设置 $theme-being-used,在 If/Else 中检查它并根据该结果使用特定的地图。这让我很容易进入并将 $theme-being-used 设置为暗色并更改所有基本变量。

我试过了:

@if (#{$theme-being-used} == light) {

@if ($theme-being-used == light) {

@if (#{$theme-being-used} == "light") {, etc..

有谁知道这是否可以做到?无论哪种方式都没什么大不了的,只是在抛出模板网站时节省了一点时间。

在我通过简单地注释/取消注释代码来实现这一点之前,即

这很好而且很快,但是将它设置在一个地方会更容易,而不必这样做。

谢谢。

0 投票
1 回答
4565 浏览

sass - SCSS/SASS 从第 n 个嵌套映射中获取值

我在尝试检索嵌套 sass 映射中的值时遇到问题。我有一张看起来像这样的地图:

我正在尝试在第一个嵌套列表“xl”中检索变量。这个想法是通过索引而不是键名来检索嵌套列表,因为这应该能够根据用户的喜好进行修改。

我原以为 usingmap-get(nth($breakpoints, 1), page-width)会起作用,但nth($breakpoints, 1)似乎返回一个包含“xl(页面宽度:1170px,gutter:30px,base-font-size:17px)”而不是实际地图的字符串,因此无法使用该map-get()功能.

关于如何做到这一点的任何想法?