Question

This is a question about sass best practices.

Lets say I have a _colors.scss file that contains variable assignments like:

 $white : #ffffff;
 $black : #000000;

And i have a _typography.scss file that uses the color variables:

 H1 {
 color: $white;
 }
 h2 {
  color : $black;
  }

In the styles.scss file:

I import as such:
@import “colors”;
@import “typography”;

My thoughts are that in the screen.scss file you would import colors first then typography. The variables are available to both typography and screen because colors was imported first.

Someone told me that you must import _colors.scss in both _typography.scss and styles.scss. Wouldn’t that be redundant?

Answer 1

A while ago I had some issues with Rails’ asset pipeline whereby I had to import the mixin/variable stylesheet in every other stylesheet for it to precompile properly on Heroku. I have no idea if this issue still exists or not, or if it was just a problem with my configuration, but if you can import the file just once in a main stylesheet, and it works in development, and it compiles, then I think it’s safe to say you don’t have to include it twice.