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

Ionic 2使用Ionic默认SASS颜色映射（$ colors）的按键（例如主要）在组件模板中使用颜色方案非常容易。但是有没有一个选项可以传递地图名称，就像它可以通过调用SASS color（）函数从模板SCSS完成一样？如何在离子2组件模板中使用SASS颜色（）？

假设我写多个SASS地图，用不同的颜色方案探索，命名不同于$颜色起见，我将如何引用从特定SASS彩色地图的特定颜色键从组件的HTML模板？

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

我想说的是，这是爱奥尼亚2 variable.scss文件

variables.scss

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

我可以从这个访问例如“主要”色键地图在分量模板HTML等：

一些-component.html

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

现在，如果我写variables.scss更SASS地图，如：

variables.scss（修改）

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

$bluegray-lightgreen: (
    primary:   #546e7a, 
    secondary:  #76ff03, 
    primary-light: #819ca9, 
    primary-dark: #29434e, 
    secondary-light: #b0ff57, 
    secondary-dark: #32cb00, 
    primary-text: #ffffff, 
    secondary-text: #000000 
);

我如何将能够使用来自'主要' 色键$ bluegray-lightgreen映射在组件模板HTML中。

注意：我知道所有这些变通办法，但我想知道这是否可能。有人可能想要这样做，因为配色方案配置文件，并可能想要从模板中轻松地切换不同的颜色映射。

来源

2017-04-26 somnathbm

使用map-get($bluegray-lightgreen, primary)可以从您的地图访问主色键。

例如，在造型你的应用程序的一个组件，您可以执行下列动作类：

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

，并参考类的组件从.scss样式设置颜色：

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

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

请参阅this forum post以获取更多选项，以便从样式表中为navbar组件着色。

来源

2017-04-26 20:33:19 timtheguy

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

回答

相关问题