Hello.
I read the customisation document, saying that we can change any variable we want in the ionic dist file “_variables.scss”.
It does work like a charm, but is there a simple way not to alter this original file ?
Problem is of course, I need to merge my file when there is a new release 
Thanks !
Alain
have you tried this?
Hello,
I tried that, but you need to override both the variabes and the rules that use the variables … not very effective work Plus, if ever the rule is refactored in a new version, I still have to watch for changes and merge eventually.
What do you think ?
Yeah I wish there was an easy way to override the scss variables, but still have an easy way to upgrade my project as Ionic comes out with new releases. Every time Ionic comes out with a new release, I have to go back and change the _variables.scss file again with the color I want for their default variables like $positive.
Ok !
I see, that’s not such a big deal, but it would be great improvement 
The solution I came up with to solve this problem is this:
I have a ionic-custom.scss file that looks like this:
// Colors
// -------------------------------
$light: #fff !default;
$stable: #f8f8f8 !default;
$positive: #4ea4be !default; //#4a87ee;
$calm: #40A7CF !default; //#43cee6;
$balanced: #a2c57a !default; //#66cc33
$energized: #f0b840 !default;
$assertive: #ef4e3a !default;
$royal: #8a6de9 !default;
$dark: #444 !default;
@import "../../bower_components/ionic/scss/ionic.scss";
As you see here, I’ve customized the positive, calm, and balanced colors. Then at the bottom I import the ionic.scss file. Since I have already defined values using !default my values now override the Ionic values. So I just compile my ionic-custom.scss file with Compass during my build and import the resulting css. For clarity, my index.html looks something like this:
<head>
<!--Import my custom Ionic css -->
<link rel="stylesheet" href='css/ionic-custom.css />
<!-- Now this file is no longer needed! -->
<!-- <link rel="stylesheet" href="assests/vendor/ionic/css/ionic.css" /> -->
</head>
Now I can simply upgrade ionic every time a new release comes out and I don’t have to change anything!
Thanks for bringing that up. I updated the tutorial:
Dude ! My mistake then, I was sooo sure I did try that 
I’ll try again then, thank you !!
Awesome @adam! That should help a lot of people out.
One thing: the tutorial shows the ionic.scss being imported at the top of the custom app.scss file. When I try this with my setup the colors don’t get customized. I have to import it after my color customization.
Hey.
This solution didn’t work for me, the ionic variables were not overriden. Using the @debug I checked in the _variables.scss:
@debug $bar-balanced-bg;
$bar-balanced-bg: rgba($button-balanced-bg, $bar-transparency);
@debug $bar-balanced-bg;
The output of this is
src/scss/ionic/_variables.scss:194 DEBUG: myColor
src/scss/ionic/_variables.scss:196 DEBUG: #66cc33
So clearly even if I put my own color befor the @import, I cannot override the ionic variable.
What I did is a myapp-variables.sccs containing the variables I want to override. Then in ionic.sccs I import it this way:
// Variables
"mixins",
"variables",
"myApp-variables",
I don’t know if it is the right way, but it doesn’t seem to dirty. For each Ionic upgrade I just have to add this import to make the css work.
Hey,
I think i can explain the problem:
you can only overwrite some variables.
Not all variables in the ionic “variables.scss” have the !default flag.
Buuuut you can overwrite only variables with the !default flag in the way “jeff_french” described.
Why does ionic not allow to overwrite all variables? It makes no sense i think.
Nobody has time to make ugly changes directly in the ionic scss files or wants to merge the changes after each upgrade. So it is nice that ionic is written in scss, but the developer has no effort of that…
Greets, Bengt
Thanks for the explainations !
It would be nice to have a statement from a developer of the ionic team.
Are there any reasons or plans with this topic?
Thank you and Greets,
Bengt
Seems to be fixed with new Beta 4!
Thanks a lot 
How would I install Beta 4?
I am having the same problems after a fresh install on 05/09/2014 through npm.
I am attempting to link the css file generated from the scss directory in my index.html. Then once I have this I plan to override variables above the @import "www/lib/ionic/scss/ionic"; in the ionic.app.scss file as suggested above.
Here’s what I did:
ionic start test-app-1 sidemenu
Updated index.html to link css to css/ionic.app.css" rather than lib/ionic/css/ionic.css
Generated css file from scss provided in start command sass scss/ionic.app.scss:www/css/ionic.app.css from command line.
Got an error:
Syntax error: Invalid CSS after "...ionicons.scss",": expected uri, was "// Variables"
on line 7 of ./test-app-1/www/lib/ionic/scss/ionic.scss
from line 25 of scss/ionic.app.scss
Any thoughts?
Thanks
Ok got it. I’ll post my finding here for others.
So I guess I was running an older version of ionic. Once I updated to the newest version of ionic sudo npm install -g ionic and created a new project I found the answer in the README.md of the project in the “Using Sass (optional)” section.
Hey all, I know this is pretty old, but here’s the method I’ve used to deal with this. First, I removed the ionic stylesheet from my html file. Then I changed my app.scss file to look like this:
@charset "UTF-8";
$ionicons-font-path: "../lib/ionic/fonts" !default;
@import
// Ionicons
"www/lib/ionic/scss/ionicons/ionicons.scss",
// Variables
"www/lib/ionic/scss/mixins",
"www/lib/ionic/scss/variables",
//Overrides
"overrides",
// Base
"www/lib/ionic/scss/reset",
"www/lib/ionic/scss/scaffolding",
"www/lib/ionic/scss/type",
// Components
"www/lib/ionic/scss/action-sheet",
"www/lib/ionic/scss/backdrop",
"www/lib/ionic/scss/bar",
"www/lib/ionic/scss/tabs",
"www/lib/ionic/scss/menu",
"www/lib/ionic/scss/modal",
"www/lib/ionic/scss/popover",
"www/lib/ionic/scss/popup",
"www/lib/ionic/scss/loading",
"www/lib/ionic/scss/items",
"www/lib/ionic/scss/list",
"www/lib/ionic/scss/badge",
"www/lib/ionic/scss/slide-box",
// Forms
"www/lib/ionic/scss/form",
"www/lib/ionic/scss/checkbox",
"www/lib/ionic/scss/toggle",
"www/lib/ionic/scss/radio",
"www/lib/ionic/scss/range",
"www/lib/ionic/scss/select",
"www/lib/ionic/scss/progress",
// Buttons
"www/lib/ionic/scss/button",
"www/lib/ionic/scss/button-bar",
// Util
"www/lib/ionic/scss/animations",
"www/lib/ionic/scss/grid",
"www/lib/ionic/scss/util",
"www/lib/ionic/scss/platform";
This is an exact copy of the ionic.scss file except I’ve imported my own overrides file and added the font path variable to the top. Now I just put all of my overrides in that file and sass watch it, and it’s all good.
This worked! Thanks!
hello
I just set up sass in my project . But i don’t know to sass.
Please help me