8

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.

Here is the current setup:

stylesheets/application.css.scss

/*
 *= 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 & placeholders helpers

//more files omitted
|
|– vendors/
|   |– _bootstrap_and_overrides.css   # Bootstrap
|   |– _scaffolds.scss   # Bootstrap

|
|
`– main.scss             # primary Sass file
*/

I'm not using the =require method as it does not allow the use of variables and mixins (which I'd like to use).

I also use a main.scss which contains all the imports. stylesheets/main.scss

@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

The helpers/globals.scss contains the color definitions: stylesheets/helpers/globals.scss

$background-light : #4e4d4a;

The file component/tables.scss is supposed to use that variable.

.table-striped > tbody > tr:nth-child(2n+1) > {
  tr, td, th {
    background-color: $background-light;
  }
}

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: Undefined variable: "$background-light".

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?

Thanks in advance for your help.

Richard_G
  • 4,700
  • 3
  • 42
  • 78
mandulis
  • 133
  • 1
  • 8
  • Edited spelling, formatting and grammar. – max May 12 '15 at 10:33
  • 1
    On a side note - since [CSS specificity](http://www.vanseodesign.com/css/css-specificity-inheritance-cascaade/) is in the order declared (new rules win against an old rule with the same selector) you want to add your normalization at the very top - otherwise it may nuke out your actual styles. But in this case you can remove `@import "base/normalize"` since [bootstrap ships with it own](http://stackoverflow.com/questions/18286189/should-i-use-normalize-css-in-my-bootstrap-project). – max May 12 '15 at 10:43

3 Answers3

17

Try removing *= require_tree from your application.css.scss. Using require doesn't work well with sass files, especially when combined with @import.

Don't forget to import/require your main.scss file when you remove require_tree.

https://github.com/rails/sass-rails#important-note

max
  • 96,212
  • 14
  • 104
  • 165
Marcus
  • 12,296
  • 5
  • 48
  • 66
  • I made the according changes but the error is still there. Could it be a problem with my gem versions? I use the following versions: sass (3.2.19) sass-rails (4.0.5) bootstrap-sass (3.2.0.2) twitter-bootstrap-rails (2.2.8) – mandulis May 12 '15 at 11:42
  • ^ I have also used this approach in my rails projects and it works. – Drops May 12 '15 at 11:42
  • @mandulis I don't know anything about the gem versions. Try simplifying your application, by removing all other styles etc till you get it working. Try adding a simple rule in your imported file, just to make sure that it's actually loaded, like `body { background: #f00; }` – Marcus May 12 '15 at 12:22
  • 1
    Alright, I tried your idea. I removed all files but the bootstrap ones and the globals and added a new test file using one of the variables from globals. That worked like a charm. Now I can add the old files in step by step and see where it goes wrong. I will post the answer as soon as I find the source of the error. This approach would have been my last resort anyway. I just thought I made a mistake in the setup. – mandulis May 12 '15 at 21:42
  • I was able to fix the problem although I am not sure what caused it. After I removed all files except the main.scss and the _globals.scss I added a test file using one of the variables and only put these two imports into my main.scss (and the bootstrap ones). That worked as expected. Then I returned all the old files step by step and it still worked. My guess is that the asset pipeline was not compiled correctly and removing all files temporarily fixed that. I will try to reproduce the error and post the result here. Thanks for the help. – mandulis May 13 '15 at 09:48
4

Noting above, I've recently had some experience with assets not working as expected. The recommendation I received was to use:

rake assets:clobber

This will clean up the pipeline.

https://github.com/rails/sprockets-rails/blob/master/README.md

Richard_G
  • 4,700
  • 3
  • 42
  • 78
3

@import is incompatible with = require. Replace and remove any = require even if you think you've commented it out.

konyak
  • 10,818
  • 4
  • 59
  • 65