Hoist mixin in sass? - sass

Question

In javascript, I usually write as follow to make code clean.
(function(){
doThing1(()=>{doThing2()});
doThing3();
function doThing1(){...}
function doThing2(){...}
function doThing3(){...}
})();
By moving the functions to the end, it make other dev eaiser to read just by look at the first lines to determine how the main function works.
My questions is how can I do this in sass?
I try following and doesn't work:
#include style1();
#include style2();
#include style3();
#mixin style1(){}
#mixin style2(){}
#mixin style3(){}
It complaint that cannot find mixin named 'style1'

Answer 1

You can't do exactly what you're asking for in part because Sass still works off of the cascade part of CascadingStyleSheets. What's below overrides what is above or, in this case, it uses what's above.
There's still a way to separate your logic from your implementation though, through partials. If you put all your mixins in one scss file, _mixins.scss then you can #import it at the top of your actual style rules. That way someone can jump into your project, see that you're using some hypothetical #include make-container(); mixin, then only go into the mixins file if they actually need to see how it works.
You'd have something like:
#import "mixins";
#include style1();
#include style2();
#include style3();
Here's a good article talking about the general ideas of Sass file organization and partials.