Css 如何在离子2组件模板中使用SASS color（）？

爱奥尼亚2只需使用爱奥尼亚默认SASS颜色图（$colors）的键（例如，主）即可在组件模板中轻松使用颜色方案。但是是否有一个选项可以传递映射的名称，就像可以通过调用SASScolor（）函数从模板scs中完成一样

假设我编写了多个SASS映射，为了使用不同的颜色方案进行探索，命名方式不同于$colors，我如何从组件模板HTML的特定SASS颜色映射中引用特定颜色键

在组件SCSS中，没有这样的问题，因为我可以使用SASS的color（）函数传入自定义颜色映射

我想说的是这是Ionic 2 variable.scss文件

变量。scss

$colors: (
  primary:    #488aff,
  secondary:  #32db64,
  danger:     #f53d3d,
  light:      #f4f4f4,
  dark:       #222
);

我可以从组件模板HTML中的此地图访问颜色键，例如“primary”，如：

some component.html

<ion-navbar color="primary"></ion-navbar>

如何在组件模板HTML中使用$bluegray-lightgreen映射中的“primary”颜色键

注意：我知道所有解决方法，但我想知道这是否可行。有人可能希望对颜色方案配置文件执行此操作，并且可能希望仅从模板轻松切换不同的颜色贴图。

使用

map get（$bluegray-lightgreen，primary）

从您的贴图访问主色键

例如，在设置应用程序组件的样式时，可以实现以下类：

.blue-bg{
    background-color: map-get($bluegray-lightgreen, primary);
}

并参考组件中的类来设置

.scss

样式表中的颜色：

<ion-navbar class="blue-bg"></ion-navbar>

您可以定义要在组件中使用的类，然后在实际组件中使用此颜色

有关样式表中

navbar

组件的颜色的更多选项，请参见

<ion-navbar class="blue-bg"></ion-navbar>