[Breaking Change] multiple sass color functions not allowed.

[captaincole]

Note: for support questions, please use one of these channels:

https://forum.ionicframework.com/
http://ionicworldwide.herokuapp.com/

Short description of the problem:

Previously in RC2 / Ionic-app-scripts 0.35 you had the ability to have multiple sass variable functions. Example,

$colors: (
  primary:     #06D3CA,
  secondary:   #32db64,
  danger:      #f53d3d,
  description: #4A4A4A,
  light:       #f4f4f4,
);
$fonts: (
  primary:     Ariel,
  light:       SFNFLight,
);

that could be called using the color() function. That now throws an error on serve / build. 

#### What behavior are you expecting?
I was expecting continuing support, but now I think it is more of a feature request

**Steps to reproduce:**
1. Add a $fonts() variable to your variables file.
2. ionic serve

Should recieve a error message saying "light" is not defined.

insert any relevant code between the above and below backticks

**Which @ionic/app-scripts version are you using?**


**Other information:** (e.g. stacktraces, related issues, suggestions how to fix, stackoverflow links, forum links, etc)
https://forum.ionicframework.com/t/sass-error-the-map-color-light-is-not-defined/71579/2

Sass Error
Undefined variable: "$fonts".

[danbucholtz]

@brandyscarney,

Can we chat about this? Ping me when you see this and have some time.

Thanks,
Dan

[danbucholtz]

Full disclosure, we probably aren't going to get to this for a bit. Let's continue discussion of this bug here as there are several sass issues we need to address.

#506

Thanks,
Dan

[brandyscarney]

I'm confused by this issue. I'm able to add the following to my theme/variables.scss file without any Sass errors:

$fonts: (
  primary:     Ariel,
  light:       SFNFLight,
);

and then in another file (in my testing I used app.scss):

body {
  font-family: map-get($fonts, primary);
}

and my generated css (www/build/main.css) is including it fine:

body {
  font-family: Ariel;
}

Please let me know if I'm misunderstanding the issue. Thanks!

[captaincole]

Originally the issue was not with "map-get" but with having two $ variables in your variable.scss

$fonts: (
  primary:     Ariel,
  light:       SFNFLight,
);
$colors: (
  primary:     #06D3CA,
  secondary:   #32db64,
  danger:      #f53d3d,
  description: #4A4A4A,
  light:       #f4f4f4,
)

Would break the build and throw errors. Your test case seems to be the expected behaviour.

I think things have significantly changed since the time the issue was logged @brandyscarney

[brandyscarney]

@thielCole Interesting! I wasn't trying to be rude, just trying to get a better understanding of the problem. 🙂 So it is no longer throwing an error with two variables now, right?

[captaincole]

Yeah I just tested it on my setup which is on 3.0.0!