IntelliJ 12 won't pull in Sass variables

Question

I have a very basic Ruby on Rails installation. I have installed the bootstrap-sass gem, have the 'bootstrap-sass' ~> 2.3.1.0 in my Gemfile and ran bundle install. Restarted all applications. I have a style.css.scss file in app > assets > stylesheets which @imports 'bootstrap'; as well as the responsive. Those styles actually get pulled into my app, because they style the front-end. However, when I try to use a variable or mixin, I get the error in the image attached, as well as IntelliJ telling me it cannot find the variable. I'm new at this whole process, so I'm just trying to understand what's needed to resolve it.

I am using Ruby 2.0.0 and Rails 3.2.13rc2

https://docs.google.com/file/d/0BwMz3RH42HtQb0U1TXdHTVF0QjQ/edit?usp=sharing

@import "bootstrap";

body {
  padding-top: 60px;
}

@import 'bootstrap-responsive';

.footer {
  margin-top: 50px;
  color: $greyLight;

    a {
      color: #e5e5e5;
    }
}

here is a link to the live dev site on heruko, without use of the variables:

http://shrouded-ocean-4277.herokuapp.com/

EDIT: in my vendor/assets/stylesheets folder, there is no bootstrap folder or _mixins or _variables files. Should these have been installed when I placed the gem in the Gemfile and did an bundle install?

EDIT: adding my github: https://github.com/ChrisSki/omrails

Answer 1

Regarding your edit, the bootstrap will not be in vendor, but in a .gem file located somewhere inside your Ruby installation.

I set up a similar application recently, following this guide. I have 2 .css.scss files, one which includes and overrides parts of bootstrap, and the other one which contains my application's style (not directly related to Bootstrap). If you look at the second file, you can see that I imported bootstrap/variables because I needed to have access to some of Bootstrap's variables, and it works like a charm.

What I don't understand is why your original screenshot complains about something named variables, which I cannot see in your SCSS file... Have you tried bootstrap/variables instead?

EDIT:

I just cloned your repo, started the server and hacked style.css.scss. I think you made a typo in your tests :)

h1 {
    color: $greyLight; /* Does not work!! */
    color: $grayLight; /* Works :) */
}

Answer 2

You should declare your variables before you import bootstrap, then you can use the variables in your scss. For example, here's how I use variables in my rails app:

/************************ CSS Variables ***************************/
$myColor: #0F851C;    

/************************ Import Bootstrap ********************************/
@import 'bootstrap';
body { padding-top: 80px; }
@import 'bootstrap-responsive';

Just define your variables at the top of your scss, then import bootstrap. Then in your scss, you can use those variables like this:

#myDiv {
  color: $myColor;
}

Hope this helps!