SASS  Folder Structure for your Projects : Best Practices

SASS Folder Structure for your Projects : Best Practices

In this article, we will see how we can create a Sass structure for your project based on your projects.

What is Sass?

Sass is a good one to write scalable CSS

Sass Structure for Small Projects:


In this file mainly used for importaing all the other scss files.


The base file is where we can have the resets,variables,mixins, and some utitly css classes.


In the componenent file we can add componnent like buttons,navbars,cards which can be reusable.


The layout file will handles the overall layout of the web page such as container and grid systems.

Sass Structure for LargeProjects:


The main file will do the same thing and handles all import of the below-mentioned scss files in one place.


Can be used for animations, base, typography, and utilities


Header, Footer, Grid, and navigation


Use this to import every single scss for each specific page


Used for deals with different themes in your project


The abstract file will handle functions, mixins, and variables


The vendor file will handle all your 3rd party css


The components will handle a single scss file for each different individual component that can be reusable accord your project

Subscribe to our Newsletter

Stay up to date! Get all the latest posts delivered straight to your inbox.

If You Appreciate What We Do Here On TutsCoder, You Should Consider:

If you like what you are reading, please consider buying us a coffee ( or 2 ) as a token of appreciation.

Support Us

We are thankful for your never ending support.

You might also like

Leave a Comment