How can a browser know the scss files?

What you are seeing is called Sourcemaps. Sourcemaps allow you to see the original source instead of the compiled CSS. This is usually used for debugging.

You can read this article for more about Sourcemaps: https://www.html5rocks.com/en/tutorials/developertools/sourcemaps/

This is mainly used for debugging and most of the times is stripted from production environments (in this case I guess they left it for people to check the actual source code and learn as you did :P)