Ionic Custom colors - SASS
<p>I am a newbie for Ionic and sass framework.</p>

<p>I am trying add custom colors for my app so i am trying to update      <code>ionic.app.scss</code> file located inside scss folder. </p>

<p>So , if i try to override an existing variable say :</p>

<p><code>$assertive : #F35C6 !default;</code> </p>

<p>it works fine but if i create a custom color say :</p>

<p><code>$my-custom-color : #F35C6F !default;</code> </p>

<p>It doesn't work .
Am i doing it correctly , Please Help! </p>

<p>Thanks.</p>

<p>EDIT : </p>

<p>ionic.app.scss file : </p>

<pre><code>@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";
</code></pre>

<p>Usage : </p>

<pre><code>&lt;label class="item item-input"&gt;
  &lt;i class="icon ion-at placeholder-icon my-custom-color"&gt;&lt;/i&gt;
  &lt;input type="email" placeholder="Email ID"&gt;
&lt;/label&gt;
</code></pre>