Can I import Partials into Partials in SASS?

Question

I'm using Sass to style a new website.
Originally my style.scss (the main SCSS file which compiles) imported general.scss (where I defined variables) and the various pages (such as homepage.scss). It worked well. I than tried to refactor homepage.scss to just import Scss of its' various sections (such as section-a.scss). Surprisingly all the variables aren't recognized anymore by the Sass compiler (Prepros).

My questions are:

1. Can I import partials into partials in SASS?
2. Can I use variables declared in a partial which is imported to the main scss file (that which compiles) in all of the other partials?

Needless to say, all of the partial file names begin with an underscore.

Thanks!

Answer 1

It must have to do with the order you are placing your imports.

That should work something like this: (I don't remember what the SCSS syntax is... but this should explain)

// primary file master.scss or whatever importing partials...
@import 'reset';
@import 'variables';
@import 'styles-etc';

// variables file / importing other partials
@import 'variables/space';
@import 'variables/color';
@import 'variables/break-points';

// styles file
body {
  background: $color; // from variables/color...
}

I've never ever suggested anyone use bootstrap... but if you look at it's structure you'll probably see a lot of this - as an example.

Answer 2

Yes, it is possible to import partials into partials in Sass. Also, there should be no problems using variables defined in one partial in any of the other partial as long as they are all imported directly or indirectly to the same main sass file.

The error I encountered was a result of not specifying the folder in which the homepage partials were located, when I imported them. The import code was:

@import 'partial'; 

While the code I should have used was:

@import 'home/partial'