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.
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