Ionic Benutzerdefinierte Farben - SASS

Question

Ich bin ein Neuling für Ionic und Hass Framework.

Ich versuche, benutzerdefinierte Farben für meine App hinzuzufügen, so dass ich versuche, ionic.app.scss Datei im scss-Ordner zu aktualisieren.

Also, wenn ich versuche, eine vorhandene Variable außer Kraft zu setzen sagen:

$assertive : #F35C6 !default;

es funktioniert gut, aber wenn ich eine benutzerdefinierte Farbe zu erstellen sagen:

$my-custom-color : #F35C6F !default;

Es ist nicht Arbeit . Bin ich es richtig, bitte Hilfe!

Danke.

EDIT:

ionic.app.scss Datei:

@charset "UTF-8"; 
/* 
To customize the look and feel of Ionic, you can override the variables 
in ionic's _variables.scss file. 

For example, you might change some of the default colors: 

$light:       #fff !default; 
$stable:       #f8f8f8 !default; 
$positive:      #387ef5 !default; 
$calm:       #11c1f3 !default; 
$balanced:      #33cd5f !default; 
$energized:      #ffc900 !default; 
$assertive:      #ef473a !default; 
$royal:       #886aea !default; 
$dark:       #444 !default; 


*/ 

$my-custom-color : #F35C6F !default; 
// The path for our ionicons font files, relative to the built CSS in www/css 
$ionicons-font-path: "../lib/ionic/fonts" !default; 

// Include all of Ionic 
@import "../www/lib/ionic/scss/ionic"; 

Verbrauch:

<label class="item item-input"> 
    <i class="icon ion-at placeholder-icon my-custom-color"></i> 
    <input type="email" placeholder="Email ID"> 
</label> 

Answer 1

Wenn Sie benutzerdefinierte Farbvariablen hinzufügen, das ist alles so ist, erstellt es eine Variable. Die Ionic-Farben dagegen haben alle mehrere CSS-Klassen in der Ionic CSS-Datei, die es Ihnen ermöglichen, beispielsweise .positive in Ihrer Ansicht zu verwenden. Hier

ist die CSS für die $positive Farbe aus den ionischen Quelldateien:

.positive, a.positive { 
    color: $positive; 
} 
.positive-bg { 
    background-color: $positive; 
} 
.positive-border { 
    border-color: $button-positive-border; 
} 

Diese Klassen sind nicht für Ihre eigene Farbe erstellt, indem diese an Ihre eigene CSS hinzufügen, können Sie das gleiche Verhalten erzielen.