Comment utiliser SASS color() dans un modèle de composant Ionic 2 ?

Question

Ionic 2 rend très facile l'utilisation d'un schéma de couleurs dans un modèle de composant en utilisant simplement des touches (par ex. primaire )de la carte de couleurs SASS par défaut de Ionic ( $colors ). Mais existe-t-il une option permettant de passer le nom de la carte, tout comme cela peut être fait à partir du modèle SCSS en appelant SASS. couleur() fonction ?

Supposons que j'écrive plusieurs cartes SASS, dans le but d'explorer différentes combinaisons de couleurs, en les nommant différemment de $colors Comment faire référence à une clé de couleur particulière d'une carte de couleurs SASS particulière à partir du modèle HTML du composant ?

Dans le composant SCSS, le problème ne se pose pas, car je peux utiliser la fonction color() de SASS pour transmettre ma carte de couleurs personnalisée.

Ce que j'essaie de dire, c'est que voici le fichier variable.scss de Ionic 2

variables.scss

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

Je peux accéder à la clé de couleur, par exemple "primaire", à partir de cette carte dans le modèle de composant HTML comme suit :

certains-composants.html

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

Maintenant, si j'écris plus de cartes SASS dans variables.scss comme :

variables.scss (modifié)

$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
);

Comment pourrais-je utiliser la clé de couleur "primaire" de l'ordinateur ? $bleu-gris-vert clair dans le modèle HTML du composant.

Note : Je connais toutes les solutions de contournement pour cela, mais je veux savoir si exactement cela est possible. Quelqu'un peut vouloir le faire comme pour le fichier de configuration du schéma de couleurs et peut vouloir facilement changer les différentes cartes de couleurs juste à partir du modèle.

Answer 1

Utilice map-get($bluegray-lightgreen, primary) pour accéder à la clé de couleur primaire de votre carte.

Par exemple, pour styliser un composant de votre application, vous pouvez implémenter la classe suivante :

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

Et faites référence à la classe dans votre composant pour définir la couleur à partir de l'élément .scss feuille de style :

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

Vous pouvez définir une classe à utiliser dans votre composant, puis utiliser cette couleur dans votre composant réel.

Voir ce message du forum pour plus d'options quant à la couleur de la navbar de la feuille de style.