How to use SASS color () in Ionic 2 component template?
Ionic 2 makes it easy to use a color scheme in a component template using only the keys (e.g. primary ) of the default SASS colormap ( $ colors ). But is it possible to pass the name of the map, as can be done from the SCSS template by calling the SASS color () function ?
Suppose I am writing several SASS maps for the sake of learning with different color schemes, naming it differently than $ colors , how would I refer to a specific color key from a specific SASS color map from the HTML template component?
From the SCSS component, there is no such problem because I can use the SASS color () function to traverse in my custom color map.
What I am trying to say is the Ionic 2 variable file.
variables.scss
$colors: (
primary: #488aff,
secondary: #32db64,
danger: #f53d3d,
light: #f4f4f4,
dark: #222
);
I can access the colored key like "primary" from this card in the HTML component template like:
some-component.html
<ion-navbar color="primary"></ion-navbar>
Now if I write more SASS maps in .scss variables like:
variables.scss (changed)
$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
);
How can I use the "main" color key from the $ bluegray-lightgreen map in the HTML template of the component.
Note . I know all the workarounds for this, but I want to know if this is possible. Someone might want to do this as a color scheme config file and might want to easily switch between different color maps from just the template.
source to share
Use map-get($bluegray-lightgreen, primary)
to access the primary colored key from your card.
For example, when linking a component of your application, you can implement the following class:
.blue-bg{
background-color: map-get($bluegray-lightgreen, primary);
}
And refer to your component class to set the color from the stylesheet .scss
:
<ion-navbar class="blue-bg"></ion-navbar>
You can define a class to use in your component and then use that color in your actual component.
See this forum post for more options to paint a component navbar
from a stylesheet.
source to share