如何在離子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顏色（）？

回答

相關問題