Question

SCSS

$colors: (
   primary:      red,
   secondary:    blue,
   accent:       #ddd,
) !default;

$colors: (
   primary:      green,
   secondary:    purple,
   black:        #000,
   white:        #fff,
);

@each $color, $value in $colors {
  .alert-#{$color} {
    color: $value;
  }
}

结果

.alert-primary {
     color: green;
}
 .alert-secondary {
     color: purple;
}
 .alert-black {
     color: #000;
}
 .alert-white {
     color: #fff;
}

我想创建一个类似引导程序的SASS框架。想要覆盖主题颜色。我如何合并这些地图以获得类似的内容？我想要一个简单的解决方案。

预期结果

.alert-accent {
   color: #ddd;
}
.alert-primary {
   color: green;
}
.alert-secondary {
   color: purple;
}
.alert-black {
   color: #000;
}
.alert-white {
   color: #fff;
}

Answer 1

您可以使用map-merge：

$colors: map-merge($colors, (
   primary:      green,
   secondary:    purple,
   black:        #000,
   white:        #fff
));

在文档中，此功能：

使用来自$map1和$map2的所有键和值返回新的映射。

通过将单个键/值对作为$map1传递，这也可以用于添加新值或覆盖$map2中的值。

如果$map1和$map2具有相同的密钥，则$map2的值优先。

如何在scss中覆盖两个地图

1 个答案: