bluehost-banner
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:

main.scss

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

_base.scss

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

_component.scss

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

_layout.scss

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

Sass Structure for LargeProjects:

Main:

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

Base:

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

Layout:

Header, Footer, Grid, and navigation

Pages:

Use this to import every single scss for each specific page

Themes:

Used for deals with different themes in your project

Abstract:

The abstract file will handle functions, mixins, and variables

Vendor:

The vendor file will handle all your 3rd party css

Components:

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