SCSS. Can't Sort Classes in Compiled CSS?

I just separated my single SCSS file into multiple partials to organize my code. Problem is, now classes aren’t sorted properly in the compiled CSS file. I want the “hide-for-mobile” class to be the most specific in this use case, followed by “navigation,” followed by “flex-jc-sb,” and then finally “flex.”

I want these classes to be modular so I can use them anywhere, but now that I can no longer sort them, I’m worried if that’s even possible. Is there an approach that fixes that issue? Thanks for any help in advance!

Screenshot_38

Hi Omar,
how did you organize your file structure and in which order do you import the SCSS module files in your main SCSS file? You don’t seem to have a specifity of your selectors by type or number of elements chained, but simply by the order of the classes in your compiled CSS. So you would need to import the most dominant file at the bottom like:

@import 'least-specific';
@import 'most-specific';

What do you mean by that? Do you want to extend classes with @extend? If not, you would just need to combine the scss files in your main file and only make the variables available for each file.