@import in sass

Ok so i just noticed that if i have @import at the start of my sass file and then make another sass file lets say _media.scss and style it there all my @media will go at the top of my style.scss file.

When that happends the style changes in @media wont work because the @media is before the style i want to change. So i decided to add @import “media” at the end of my style.scss file to make it transform to the main.css at the end.

Question is it ok to add @import at the end of my scss file like this. https://gyazo.com/4de5f6f5a06e25c6114f1c19f5debe53

Or else this happends: https://gyazo.com/4cd052876b3aca7bf4e2fe69183cdbda

In what order are you importing your sass files? For instance, let’s say you have a main.scss. This is your master file you’re importing to. Your other files might be _reset.scss, _mixins.scss, _typography.scss, _home.scss. These are the files you’ll import to main.scss. Your problem might be a hierarchy problem. From top down your imports would want to look like this:

@import ‘reset’; // first reset everything
@import ‘typography’; // bring in the fonts
@import ‘mixins’; // your mixins may involve fonts, so this has to be after typography
@import ‘home’; // home needs all of these elements in place before it can use them

I hope this helps