26

Basically I have a structure that used to work perfectly in 3.0.x and now it breaks with undefined variable errors.

  • partials
    • _base.css.sass
    • _header.css.sass
  • main.css.sass
  • application.css.sass

the application.css.sass:

//=require 'main'

the main.css.sass:

@import 'partials/base'
@import 'partials/header'

Pretty simple stuff.

I get an error on _header.css.sass because it uses a variable defined on _base.css.sass

I didn't have this error before, and it makes no sense to me, since we're importing those variables on the _base.css.sass in the same context we are importing the _header.css.sass.

Am I going to have to import the _base.css.sass on every partial too? What is the point of the main.css.sass requiring global variables if they cannot be used in the own partials you are requiring?

If my structure is completely wrong, please give me an alternative, I'd love suggestions.

Draiken
  • 3,805
  • 2
  • 30
  • 48
  • "config.assets.precompile" is your friend :-) [Just have a look here which really helped me!!!][1] [1]: http://stackoverflow.com/questions/7134034/using-rails-3-1-assets-pipeline-to-conditionally-use-certain-css –  Sep 13 '11 at 09:34

5 Answers5

27

You can't use //=require to include "dynamic" SASS stuff like mixins and variables, because that's used just for including the most "static" stuff (like pure CSS). You have to @import all your files in application.css.sass. Railscasts provides good explanation of this in episode #268.

muhal
  • 409
  • 4
  • 5
2

There is a simple solution for the original topic. Your application and main css files should be scss files. That means you can use the known syntax:

/*
 *= require_self
 *= require main
 */

In main.scss you can import the partials like this:

@import 'partials/base'
@import 'partials/header'

These files are sass files and you can benefit from the greatness of SASS ;-)

awenkhh
  • 5,811
  • 1
  • 21
  • 24
2

I think I had the same problem and what helped was declaring the variables before @imports. Hope this helps someone =).

Joonas Ahola
  • 199
  • 5
1

Apparently you HAVE to use the application.css.sass as a manifest, or nothing will work.

Basically you can separate everything but they need to be called from the application file because the scopes are not shared.

Little bit too enforcing if you ask me...

Draiken
  • 3,805
  • 2
  • 30
  • 48
  • 1
    Could you please elaborate on what you mean with "you have to use the … as a manifest"? I'm using `application.css.sass` as my main file where I `@import` all my other files, but I still run into the same problem as described above. – Marc Jan 23 '12 at 17:38
  • You are using a .sass where the filename is .scss – raulriera Jan 23 '12 at 18:53
  • Thanks, it was a typo @raulriera – Draiken Jan 23 '12 at 19:11
  • 2
    Well, it worked for me several times now. In order for the declared variables and mixins to work on the same file, you have to import them with sass, not with sprockets. @Marc – Draiken Jan 23 '12 at 19:15
  • 2
    I'm using sass import-statements but the variables are not available in other files while pre-compiling (using Heroku). I temporarily 'fixed' the problem by importing the sass file with the variables in each and every other sass file, but this is far from an ideal solution. – Marc Jan 24 '12 at 14:00
  • @Marc I must think this is a heroku problem. Does it work on your development environment? Never had any problems after I completely switched to sass imports. – Draiken Jan 26 '12 at 16:36
0

It's a sass file. Use @import in application.css.sass instead of require. require is for plain css or template engines that don't have an import system.

chriseppstein
  • 10,453
  • 1
  • 25
  • 17