Should I Combine My Sass Output (multiple Files) Into A Single File? If So, How?

I used to have one scss file, and turn it into one css file and use that in my html. I now want to reorganise my stuff, and use multiple scss files, split into a main.scss, buttons

Solution 1:

Look into files called "Partials". You would name your files like this

_buttons.scss
_lists.scss

Then create a main.scss file(name it whatever you want). enter

@import buttons
@import lists

Then convert your main.scss file to css. You will have one css file. You can read up on this at the SASS website

http://sass-lang.com/guide

If you use SMACSS or other methods, in each directory you would do this. For instance a layout directory

Layout
_buttons.scss
_list.scss
_layout-dir.scss

In the layout-dir file you would import all the files in the layout directory then in your main.scss file you would only import each directory file

@import layout/layout-dir
@import basics/base-dir

etc

Your variable and mixins files would also import into the main.scss file, include them first so everything has access to them

https://www.youtube.com/watch?v=GI1BhlDtoUs