title: Ionic - SCSS - '[scss] ) expected' && '[scss] { expected' error messages
body: <p>I am fairly new to Ionic and I'm using the ionic 2 beta using angular 2. Now this works with Sass. And ionic generates their default styling in your application <code>app/theme/app.variables.css</code> where the <code>primary</code>and <code>secondary</code> etc. colors are defined. The default scss file they give you looks like this:</p>
  
  <pre><code>// http://ionicframework.com/docs/v2/theming/
  
  // Ionic Shared Functions
  // --------------------------------------------------
  // Makes Ionic Sass functions available to your App
  
  @import "globals.core";
  
  // App Shared Variables
  // --------------------------------------------------
  // To customize the look and feel of this app, you can override
  // the Sass variables found in Ionic's source scss files. Setting
  // variables before Ionic's Sass will use these variables rather than
  // Ionic's default Sass variable values. App Shared Sass imports belong
  // in the app.core.scss file and not this file. Sass variables specific
  // to the mode belong in either the app.ios.scss or app.md.scss files.
  
  
  // App Shared Color Variables
  // --------------------------------------------------
  // It's highly recommended to change the default colors
  // to match your app's branding. Ionic uses a Sass map of
  // colors so you can add, rename and remove colors as needed.
  // The "primary" color is the only required color in the map.
  // Both iOS and MD colors can be further customized if colors
  // are different per mode.
  
  $colors: (
    primary:    #387ef5,
    secondary:  #32db64,
    danger:     #f53d3d,
    light:      #f4f4f4,
    dark:       #222,
    favorite:   #69BB7B
  );
  </code></pre>
  
  <p>And, as provided in their docs, this is the correct code. (although they don't include <code>favorite</code>).</p>
  
  <p><a href="https://i.stack.imgur.com/4LWc7.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/4LWc7.png" alt="My Code"></a> <a href="https://i.stack.imgur.com/04mOI.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/04mOI.png" alt="Docs"></a></p>
  
  <p><strong>btw the extra comma on the end of dark doesn't change anything</strong></p>
  
  <p>Now the problem is that I get 2 errors. 1 on the <code>primary:    #387ef5,</code> at the colon. Saying <code>[scss] ) expected.</code> </p>
  
  <p><a href="https://i.stack.imgur.com/CFL60.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/CFL60.png" alt="primary error message"></a></p>
  
  <p>And 1 on the <code>secondary:  #32db64,</code> on the colon saying <code>[scss] { expected.</code>
  <a href="https://i.stack.imgur.com/X9vDK.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/X9vDK.png" alt="enter image description here"></a></p>