Basic structure

If you’re using SASS on a small project, such as a single web page, a very minimal project structure could be:

_base.scss
_layout.scss
_components.scss
main.scss

Here we have 3 partial files connecting up to our main.scss.

Base: Contained within this file are all your resets, variables, mixins, and any utility classes.

Layout: Contains all the CSS that handles the layout, such as the container and any grid systems.

Components: Anything reusable such as buttons, navbars, cards etc.

Main: It should ONLY contain the imports for the above files.

If any file grows too cluttered or disorganized, it’s time to expand our structure. For example, consider adding a new folder for your components, and then break it up into individual files such as _button.scss or _carousel.scss.

However, when working on a larger project, we’ll need a more rigorous architecture, which we’ll look at in the next lesson!