SCSS @each 循环可以包含多个地图吗?
Posted
技术标签:
【中文标题】SCSS @each 循环可以包含多个地图吗?【英文标题】:Can a SCSS @each loop contain multiple maps? 【发布时间】:2019-07-13 05:13:09 【问题描述】:我正在尝试构建一个 SCSS @each 循环,它从一张地图调用颜色,从另一张地图调用不透明度。
我发现这可以用变量列表来完成,但是它可以用地图来完成吗?
示例代码:
$colors: (
red: red,
orange: orange,
yellow: yellow,
green: green,
);
$opacities: (
00: 0.0,
25: 0.25,
50: 0.5,
75: 0.75,
100: 1,
);
@each $color, $opacity in zip($colors, $opacities)
.bg-#$color-#$opacity
@include bg-color-op(#$color, #$opacity);
@mixin bg-color-op($bg-color, $bg-opacity)
background-color: rgba($bg-color, $bg-opacity);
【问题讨论】:
您是否需要每种不透明度的颜色或不透明度为 1 的颜色 1 等? 我需要每一种颜色都有每一种不透明度。我希望能够调用具有 50% 不透明度的红色 (class="bg-red-50") 或具有 25% 不透明度 (class="bg-green-25") 的绿色或我需要的任何其他组合的 CSS 类. 我认为做你想做的唯一方法是在另一个循环中嵌套一个循环。 【参考方案1】: @each $color-key, $color-value in $colors
@each $opacity-key, $opacity-value in $opacity
// Use key values of map to generate desired classes
嵌套循环以生成您的类。
【讨论】:
这确实有效!但是,在我的特定情况下,我使用变量而不是颜色值中的颜色名称。在编译过程中,当颜色为变量时,不接受 rgba 格式的值。这是解决这个问题的方法吗?以上是关于SCSS @each 循环可以包含多个地图吗?的主要内容,如果未能解决你的问题,请参考以下文章
我可以在没有计数器的情况下引用“for each”循环的索引吗?