3

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!

Ben Carp
  • 24,214
  • 9
  • 60
  • 72

3 Answers3

2

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.

sheriffderek
  • 8,848
  • 6
  • 43
  • 70
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'
Ben Carp
  • 24,214
  • 9
  • 60
  • 72
0

This should be fine depending on your set up, just be sure to have your hierarchy set up in a way so that the imports flow logically so that you're not trying to access variables before they are defined and the likes.

That is more likely to be an issue if you're using a plugin / package that just grabs all the files from a folder at a time.

I normally just try to stick to having one file for importing everything in that way it is easier to manage. Each to their own though.

CrispySinger
  • 37
  • 1
  • 10