implementing SASS version of template

I've downloaded the latest update with the SASS files; however, I need some clarifications as to the implementations of the other CSS files in the package.

What other CSS files are required to be added in order for the template to work as expected? I see an additional CSS folder with non-SASS files.

This template is great! I'm a big fan of SASS and am using Laravel's exlixer with browser sync to compile and run my development. I need to know if there is a specific order that the SASS files need to be in. Obviously variables & mixins should go to the top, but I'm unsure about the order in the other files.

Your documentation is great but would be perfect IMO if you had more specifics on the order of compiling LESS and SASS.

elixir(function(mix) {

mix
    .sass([
        'variables.scss',
        'mixins.scss',
        'dark.scss',
        'blog.scss',
        'layouts.scss',
        'content.scss',
        'events.scss',
        'extras.scss',
        'footer.scss',
        'header.scss',
        'helpers.scss',
        'pagetitle.scss',
        'portfolio.scss',
        'responsive.scss',
        'shop.scss',
        'shortcodes',
        'shortcodes.scss',
        'sliders.scss',
        'topbar.scss',
        'typography.scss',
        'widgets.scss',
        'shortcodes/blog.scss',
        'shortcodes/content.scss',
        'shortcodes/dark.scss',
        'shortcodes/events.scss',
        'shortcodes/extras.scss',
        'shortcodes/footer.scss',
        'shortcodes/header.scss',
        'shortcodes/helpers.scss',
        'shortcodes/layouts.scss',
        'shortcodes/mixins.scss',
        'shortcodes/pagetitle.scss',
        'shortcodes/portfolio.scss',
        'shortcodes/responsive.scss',
        'shortcodes/shop.scss',
        'shortcodes/shortcodes',
        'shortcodes/shortcodes.scss',
        'shortcodes/sliders.scss',
        'shortcodes/topbar.scss',
        'shortcodes/typography.scss',
        'shortcodes/variables.scss',
        'shortcodes/widgets.scss'
    ], 'public/assets/css/app.css')

});

Hey, I think I figured it out. I first imported the sass directory in to my project. But I see there is a style.scss file that does all of the imports in the order they are needed! That is awesome!

// Initialize
@import "sass/variables.scss";
@import "sass/mixins.scss";

// Core CSS
@import "sass/typography.scss";
@import "sass/helpers.scss";
@import "sass/layouts.scss";

// Content Blocks
@import "sass/topbar.scss";
@import "sass/header.scss";
@import "sass/sliders.scss";
@import "sass/pagetitle.scss";
@import "sass/content.scss";
@import "sass/portfolio.scss";
@import "sass/blog.scss";
@import "sass/shop.scss";
@import "sass/events.scss";

// Shortcodes
@import "sass/shortcodes.scss";

// Footer
@import "sass/footer.scss";

// Widgets
@import "sass/widgets.scss";

// Extras
@import "sass/extras.scss";