Skip to content

Instantly share code, notes, and snippets.

@AdamMarsden
Last active April 1, 2024 12:57
Show Gist options
  • Save AdamMarsden/7b85e8d5bdb5bef969a0 to your computer and use it in GitHub Desktop.
Save AdamMarsden/7b85e8d5bdb5bef969a0 to your computer and use it in GitHub Desktop.
Sass Architecture Structure

Sass Architecture Structure

sass/
|
|– base/
|   |– _reset.scss       # Reset/normalize
|   |– _typography.scss  # Typography rules
|   ...                  # Etc…
|
|– components/
|   |– _buttons.scss     # Buttons
|   |– _carousel.scss    # Carousel
|   |– _cover.scss       # Cover
|   |– _dropdown.scss    # Dropdown
|   ...                  # Etc…
|
|– layout/
|   |– _navigation.scss  # Navigation
|   |– _grid.scss        # Grid system
|   |– _header.scss      # Header
|   |– _footer.scss      # Footer
|   |– _sidebar.scss     # Sidebar
|   |– _forms.scss       # Forms
|   ...                  # Etc…
|
|– pages/
|   |– _home.scss        # Home specific styles
|   |– _contact.scss     # Contact specific styles
|   ...                  # Etc…
|
|– sass-utils/
|   |– _variables.scss   # Sass Variables
|   |– _functions.scss   # Sass Functions
|   |– _mixins.scss      # Sass Mixins
|   |– _helpers.scss     # Class & placeholders helpers
|
|– vendors/
|   |– _bootstrap.scss   # Bootstrap
|   |– _jquery-ui.scss   # jQuery UI
|   ...                  # Etc…
|
|
`– style.scss            # Primary Sass file

BASE FOLDER

The base/ folder holds what we might call the boilerplate code for the project. In there, you might find the reset file, some typographic rules, and probably a stylesheet, defining some standard styles for commonly used HTML elements.

COMPONENTS FOLDER

For smaller components, there is the components/ folder. While layout/ is macro (defining the global wireframe), components/ is more focused on widgets. It contains all kind of specific modules like a slider, a loader, a widget, and basically anything along those lines. There are usually a lot of files in components/ since the whole site/application should be mostly composed of tiny modules.

LAYOUT FOLDER

The layout/ folder contains everything that takes part in laying out the site or application. This folder could have stylesheets for the main parts of the site (header, footer, navigation, sidebar…), the grid system or even CSS styles for all the forms.

PAGES FOLDER

If you have page-specific styles, it is better to put them in a pages/ folder, in a file named after the page. For instance, it’s not uncommon to have very specific styles for the home page hence the need for a _home.scss file in pages/.

SASS-UTILS FOLDER

The sass-utils/ folder gathers all Sass tools and helpers used across the project. Every global variable, function, mixin and placeholder should be put in here.

The rule of thumb for this folder is that it should not output a single line of CSS when compiled on its own. These are nothing but Sass helpers.

VENDORS FOLDER

And last but not least, most projects will have a vendors/ folder containing all the CSS files from external libraries and frameworks – Normalize, Bootstrap, jQueryUI, FancyCarouselSliderjQueryPowered, and so on. Putting those aside in the same folder is a good way to say “Hey, this is not from me, not my code, not my responsibility”.

If you have to override a section of any vendor, I recommend you have an 8th folder called vendors-extensions/ in which you may have files named exactly after the vendors they overwrite.

For instance, vendors-extensions/_boostrap.scss is a file containing all CSS rules intended to re-declare some of Bootstrap’s default CSS. This is to avoid editing the vendor files themselves, which is generally not a good idea.

STYLE FILE

The style file should be the only Sass file from the whole code base not to begin with an underscore. This file should not contain anything but @import and comments.

Files should be imported according to the folder they live in, one after the other in the following order:

  1. sass-utils/
  2. vendors/
  3. base/
  4. layout/
  5. components/
  6. pages/
@kotaid
Copy link

kotaid commented Dec 17, 2021

will certainly apply this pattern, thank you so much.

@webdevbiv
Copy link

nice ty

@RitikRajput696
Copy link

RitikRajput696 commented Feb 24, 2022

It is really helpful, thank you so much.

@iamcerebrocerberus
Copy link

perfect for modularity

@MrAhmedElsayed
Copy link

MrAhmedElsayed commented Jul 21, 2022

I loved this structure, as well as your explanation for it, and to express my gratitude
I created this small script to create the suggested structure with Python:
please visit this Snippet

@sam4rano
Copy link

I apply this type of structure for some of my projects and i can say i really love it

@canicemichael
Copy link

This looks good. Thank you.

@gsccheng
Copy link

gsccheng commented Sep 6, 2022

What is the reason for not putting the component scss files in a folder with the main component definition file?

@dominO1993
Copy link

I have to try it 👍

@benvxavier
Copy link

Valeu Mano! 👏👏

@Joydip-Paul
Copy link

Thanks for sharing

@qadzek
Copy link

qadzek commented Oct 31, 2023

This file should not contain anything but @import and comments.

The Sass team now recommends to use @use instead of @import.

@Adhamjon11
Copy link

bizam bormiz uzb👌😂😊❤️

@oripovnodirbek
Copy link

very good👍👌👌

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment