Compiled from Sass Partials Into a Single CSS File

You can create tens or hundred of partials, without impacting your site’s performance.
Sass compiles the contents of a partial only when imported from within a regular SCSS/Sass file, using the @import directive.

To create a partial, add an _ character to the beginning of the file name.
Import a _reset.scss to main stylesheet.

@import 'reset';

Partials directories: base, components, layouts, utilities, etc
Partial styles: _helpers.scss, _main.styles.scss, _mixins.scss, _variables.scss.

Finally, import them all into the main styles file style.scss.

// Utilities
@import 'utilities/variables',
        'utilities/mixins',
        'utilities/functions',
        'utilities/helpers';
        
// Base Styles     
@import 'base/reset',
        'base/base';

// Layout Styles
@import 'layout/containers',
        'layout/header',
        'layout/card',
        'layout/footer';

// Component Styles
@import 'components/nav',
        'components/buttons',
        'components/icons',
        'components/images';

This compiles all style files into a single stylesheet file style.css.