title: Rails Sass: variables are not passed with @import
body: <p>I have a rails project which uses twitter bootstrap and sass. The scss files are structured into folders so I have
  a better overview. Now I want to define a file for global variables which contains my colors etc. and pass those values down to other files so I have less redundant code. While all code is properly imported and applied,
  variables don't work.</p>
  
  <p>Here is the current setup:</p>
  
  <p>stylesheets/application.css.scss</p>
  
  <pre><code>/*
   *= require_self
   *= require_tree
   */
  
  
  /*
  stylesheets/
  |
  |– base/
  |   |– _reset.scss       # Reset/normalize
  |   |– _typography.scss  # Typography rules
  |
  |– components/
  |   |– _buttons.scss     # Buttons
  |   |– _messages.scss    # Nachrichten
  |   |– _dropdown.scss    # Dropdown
  |
  |– helpers/
  |   |– _globals.scss     # Sass Variables
  |   |– _functions.scss   # Sass Functions
  |   |– _mixins.scss      # Sass Mixins
  |   |– _helpers.scss     # Class &amp; placeholders helpers
  
  //more files omitted
  |
  |– vendors/
  |   |– _bootstrap_and_overrides.css   # Bootstrap
  |   |– _scaffolds.scss   # Bootstrap
  
  |
  |
  `– main.scss             # primary Sass file
  */
  </code></pre>
  
  <p>I'm not using the =require method as it does not allow the use of variables and mixins (which I'd like to use).</p>
  
  <p>I also use a main.scss which contains all the imports.
      stylesheets/main.scss</p>
  
  <pre><code>@import "bootstrap-sprockets";
  @import "bootstrap";
  
  @import "helpers/globals";
  
  @import "base/normalize";
  @import "base/grid";
  @import "base/typography";
  
  @import "components/buttons";
  @import "components/tables";
  //other files omitted
  </code></pre>
  
  <p>The helpers/globals.scss contains the color definitions:
      stylesheets/helpers/globals.scss</p>
  
  <pre><code>$background-light : #4e4d4a;
  </code></pre>
  
  <p>The file component/tables.scss is supposed to use that variable.</p>
  
  <pre><code>.table-striped &gt; tbody &gt; tr:nth-child(2n+1) &gt; {
    tr, td, th {
      background-color: $background-light;
    }
  }
  </code></pre>
  
  <p>According to most information on the web and the official SASS-guide this should work as I declared the variable and import the according file before the file that uses it. Certainly, the variable is not found:
  <code>Undefined variable: "$background-light"</code>.</p>
  
  <p>The whole procedure seems rather simple but I'm running out of ideas. Do I need to set something in my environment files or do I need to change my application.css.scss? Or might bootstrap interfere here?</p>
  
  <p>Thanks in advance for your help. </p>