Basic structure
In this lesson, we'll take a look at an example of a basic project 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!
Get hands-on with 1200+ tech skills courses.