Proper SCSS Asset Structure in Rails

Question

So, I have an app/assets/stylesheets/ directory structure that looks something like this:

   |-dialogs
   |-mixins
   |---buttons
   |---gradien         


        

Answer 1

Create the following folder structure:

+ assets
|
--+ base
| |
| --+ mixins (with subfolders as noted in your question)
|
--+ styles
  |
  --+ ...

In folder base create a file "globals.css.scss". In this file, declare all your imports:

@import 'base/colors';
@import 'base/mixins/...';
@import 'base/mixins/...';

In you application.css.scss, you should then have:

*= require_self
*= depends_on ./base/globals.css.scss
*= require_tree ./styles

And as the last step (this is important), declare @import 'base/globals' in every style file where you want to use variables or mixins. You might consider this overhead, but I actually like the idea that you have to declare the dependencies of your styles in every file. Of course, it is important that you only import mixins and variables in the globals.css.scss as they do not add style definitions. Otherwise the style definitions would be included multiple times in your precompiled file ...