SASS - architecture & loading

Question

I am using SASS on my Symfony2 and I read few articles about recommended architecture of sass.

• base/ – contains global styles, such as resets, typography, colors, etc.
• components/ – contains each self-contained component in its own .scss partial
• layout/ – contains styling for larger layout components; e.g. nav, header, footer, etc.
• pages/ – contains page-specific styling, if necessary
• themes/ – contains styling for different themes
• utils/ – contains global mixins, functions, helper selectors, etc.
• vendors/ – contains 3rd-party styles, mixins, etc.
• main.scss – output file that brings together all of the above parts

In examples they are loading all of files at the same time, but I am concerned that I should separate different page styles and their loading.

I wanted to ask if loading all of .scss files at once doesn't slow the page? Why separation is not mentioned? Inheritance of variables? Why?

Answer 1

Separation of files makes for easier development - not having to search through hundreds or even thousands of lines of SCSS whenever you want to make a minor change is much better - but don't worry; it won't slow down your pages.

When SASS compiles it merges the SCSS files into one CSS file and often minifies it at the same time.