Bootstrap Custom Variable Rails SASS - ruby-on-rails

Question

In the stylesheets/bootstrap directory I have:
_variables.scss I have:
$black: #000 !default;
$grayDark: #333 !default;
...
$textColor: $grayDark !default;
This file is imported in the bootstrap.scss file:
// Core variables and mixins
#import "bootstrap/variables"; // Modify this for custom colors, font-sizes, etc
#import "bootstrap/mixins";
...
In the stylesheets directory I have bootstrap_include.scss
#import "bootstrap/bootstrap";
#import "bootstrap/responsive";
I want to override the default text to be black, so I create a custom variables file and imported it in my custom bootstrap file
_variables_custom.scss:
$black: #000 !default;
$textColor: $black !default;
and then in bootstrap_custom.scss
#import "variables_custom";
Finally in the application.css.scss
*= require bootstrap_custom
*= require bootstrap_include
When I refresh the page, bootstrap_custom is always empty, I'm a css newbie, and why it isn't working?
Thanks
NOT SURE IF THIS IS NICE BUT I SOLVED IT USING:
my bootstrap_custom now includes
$black: #000 !default;
$textColor: $black !default;
#import "bootstrap/bootstrap";
#import "bootstrap/responsive";
and my application.css.scss now only includes
*= require bootstrap_custom

Answer 1

in your stylesheet, remove !default
that is, in your file _variables_custom.scss - instead of:
$black: #000 !default;
$textColor: $black !default;
use this instead:
$black: #000;
$textColor: $black;
!default is a sass variable flag that allows for reassignment before or after the !default is declared, with the non !default value always winning.
so:
$foo: black;
$foo: red !default;
body { background: $foo; }
will result in a black body background, even though red is declared after black

Answer 2

While we are talking about variables, there's nothing related to CSS. Variables, in this case, are used by SASS/Compass a CSS preprocessor tool, used by Rails to make the use of CSS more easy (eg. by using variables).
So when you insert your variables in a file, and let it be processed alone, it wont produce any CSS code unless you make any use of then in a valid CSS attribute.
If you want to test it, add to your bootstrap_custom.css something like:
body {
background-color: $black;
}
And you will see your $black variable being used.