In both cases, the spacing-outer-bottom is taken from _spacing.scss. In your second example however the spacing-outer-bottom is also present in the custom.scss and this takes preference over the _spacing.scss. That is also the reason why it is showing _custom.scss in the inspector.
When making a modification to the styling it is common practice to only modify custom.scss and avoid modifying the templates themselves.
For the bonus question, projects that have the scss compiled into one single _custom.scss will still have their separate scss files in <projectdir>\theme\styles\web\sass\. So, if you have access to the project, you will be able to compile it into the usual .scss files in the usual separated scss files.
not sure if this helps, but if your question is:
“why does sass generate a .css or when is it included in a giant .css?”
depending if you use an underscore infront of the .sass or not.
1 file:
styling.scss
_buttons.scss
_typography.scss
3 files:
styling.scss
buttons.scss
typography.scss
I think custom.scss is when something hasn’t refreshed right.
I can always see the Sass root file and line number (unless something has bugged out)
not sure how or why, but I work with calypso and I think it has something to do with the port that is being used there.