Ionic - SCSS - '[scss] ) expected' && '[scss] { expected' error messages
<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>