title: How can I change the default color variables using scss in Ionic?
body: <p>I have been working with Ionic for some time now but am not sure how to use scss along with it. While building a new Ionic project I have a scss folder with a scss file in it. I have tried everything possible but my changes are not affecting the CSS of my page. Can anyone tell me exactly what I need to do to work with scss? All we are trying to do is change the default color variables provided by Ionic.</p>
  
  <p>I have completed the necessary setup required as described <a href="http://ionicframework.com/docs/cli/sass.html" rel="nofollow">here</a>.</p>
  
  <p><strong>Here is my <code>ionic.app.scss</code> file inside scss folder:</strong></p>
  
  <pre><code>/*
  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;
  */
  
  // 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><strong>Here is my _variables.scss file inside <code>lib/ionic/scss</code> folder:</strong></p>
  
  <pre><code>// 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;
  
  
  // Base
  // -------------------------------
  
  $font-family-sans-serif:           '-apple-system', "Helvetica Neue", "Roboto", "Segoe UI", sans-serif !default;
  
  $font-family-light-sans-serif:    '-apple-system', "HelveticaNeue-Light", "Roboto-Light", "Segoe UI-Light", sans-serif-light !default;
  </code></pre>
  
  <p>Changes made in the <code>_variables.scss</code> are not shown in my app and I don't understand why.</p>
  
  <p>Here is my console after running gulp in it.</p>
  
  <pre><code>abc-Mac-mini:FileFolder xyz$ gulp
  [10:34:49] Using gulpfile /Applications/MAMP/htdocs/FileFolder/gulpfile.js
  [10:34:49] Starting 'sass'...
  [10:34:50] Finished 'sass' after 731 ms
  [10:34:50] Starting 'default'...
  [10:34:50] Finished 'default' after 15 μs
  abc-Mac-mini:FileFolder xyz$ 
  </code></pre>