rails 4 and compass, how import only one time my sass files?

Question

I have a rail 4 project with "stylesheets/application/index.css.scss" with my all css files:

 /*
 *= require jquery.ui.all
 *= require_tree ../shared
 *= require_tree ../design
 *= require_tree ../layout
 *= require_self
 *= require_tree .
 */

rails compile all css in only one, minimized (in prod).

I need to import @import "shared/header" in many files.

exemple: in "stylesheets/layout/main.css.scss"

@import 'shared/header';

.header
{
  @extend .header_common_overview;
  [...]
}

but I @import 'shared/header' in others files too. The result is :

when rails compile in only one file, there are many times the same rules ".header_common_overview", because I import it in different files.

I tried to put the "import" instruction directly in index.css.scss, but it does't works.

So how can I import only one time a file, and be abble to call the content in all others files?

Answer 1

First, don't use require_tree . You lose control over the include order of your CSS files, potentially leading to cascading issues - styles being overwritten that really should not be.

I've learned to avoid sprockets' require lines in the main SASS files for reasons similar to what you describe.

• It can lead to duplication, particularly when using =require_tree all over the place
• Variables/mixins/etc... can't be included via sprockets (I'd love to be proven wrong about this though)

In your index.css.scss you might consider simply putting

@import "vendor";
@import "shared";
@import "design";
@import "layout";

// Your main styling here.

@import "another_file";

These @import lines correspond to other sass files. shared.css.scss for example might look like

/*
 *=require ./shared/header
 */

The idea is to

1. Keep clean separation/organization of your asset includes
2. Explicitly define each asset include so you retain full control over include order
3. Use SASS @importinstead of Sprockets =require directive to keep variables, mixins, etc... present in an included file available throughout.

Answer 2

My solution is : create all.css.scss with :

/*
 *= require jquery.ui.all => static, don't need import
 */
@import 'included/**/*'; //all files included (at first time)
@import 'all/**/*'; //all real css files which requires included file (in second times)

The order is respected and controlled.

The included files is present only one time

the included files are shared in each real css files.

thx for help.