Ionic-framework: scss variable $background-color overwritten, cannot use inside page scss

[MarkChrisLevy]

Short description of the problem:

When scss variable $background-color is used inside page scss file the value is not taken from variables.scss, it appears that somewhere in the ionic scss files are overwritten.

What behavior are you expecting?

If $background-color variable was set in variables.scss it should remain unchanged (if not changed by developer on purpose of course).

Steps to reproduce:

1. ionic start --v2 test
2. in theme/variables.scss set $background-color to #bb6996
3. in pages/home/home.scss write page-home { background-color: $background-color; }
4. ionic serve
5. when page loaded in the browser, open chrome/firefox developer tools, see what is the value of background-color property of page-home element - it should be #bb6996, but it is not, the color is #69BB7B, which is the default value of "favorite" color (from colors list defined in variables.scss)

Other information:
I'm not an expert in sass, but it seems, that somewhere in ionic scss files the global background-color variable is overwriten, likely when loop on colors is made and that is the reason why $background-color is set to last color from $colors.

Which Ionic Version? 1.x or 2.x
Ionic Framework Version: 2.0.0-rc.0
Ionic CLI Version: 2.1.0
Ionic App Lib Version: 2.1.0-beta.1

[brandyscarney]

Hey, thanks for the issue! I was able to reproduce this using the conference app. You are correct! It seems that we are reusing the $background-color name in some of our component loops which is overriding the variable when you try to use it. I'll look into fixing this.

[MarkChrisLevy]

@brandyscarney Thanks! You are great!