Structuring Sass projects with partials

• This divides 2 parts.
• first approach is for small projects such as a single web page, landing page etc...
• as far as second one goes is for big projects like blog sites, news sites and such a kind of projects.

why do you need this?

Well, this makes your stylesheets more organized, readable and even a piece of cake to follow for any front-end developers. If you don't trust in, try for free. It is absolutely friendly open-source, so feel free to use in your project 🔥

First approach for small projects 🚀

As you can see the picture, which shows the path of the stylesheet, is pretty clear to follow right?
- Here we have 3 partials 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.

NOTE in this repo, only stylesheets, in which are used for big projects, exist. Hence, just do it on your own
Create folder called whatever you want, but stylesheets sound like cool. Right After, inside of that folder, just add 3 partials as the picture shows

However, when we’re working on a larger project, we’ll need a more rigorous architecture, which we’ll look at in the below 🔥

Second approach for big projects 🚀

The architecture known as the 7–1 pattern (7 folders, 1 file), is a widely-adopted structure that serves as a basis for large projects. You have all your partials organized into 7 different folders, and a single file sits at the root level (usually named main.scss) to handle the imports — which is the file you compile into CSS.

Here’s a sample 7–1 directory structure, I’ve included some examples of files that would sit inside of each folder:

First of all, just check this out what is going on inside of the stylesheets folder by seeing below the pic 👇

Abstracts (or utilities): holds Sass tools, helper files, variables, functions, mixins and other config files. These files are meant to be just helpers which don’t output any CSS when compiled.

Base: holds the boilerplate code for the project. Including standard styles such as resets and typographic rules, which are commonly used throughout your project.

Components (or modules): holds all of your styles for buttons, carousels, sliders, and similar page components (think widgets). Your project will typically contain a lot of component files — as the whole site/app should be mostly composed of small modules.

Layout: contains all styles involved with the layout of your project. Such as styles for your header, footer, navigation and the grid system.

Pages: any styles specific to individual pages will sit here. For example it’s not uncommon for the home page of your site to require page specific styles that no other page receives.

Themes: this is likely not used in many projects. It would hold files that create project specific themes. For example if sections of your site contain alternate color schemes.

Vendors: contains all third party code from external libraries and frameworks — such as Normalize, Bootstrap, jQueryUI, etc.

Main.scss: This file should only contain your imports! For example...

Also Bonus files 🔥

in the stylesheet file, CSS MODERN RESET, PX TO REM FUNCTIONS and BREAKPOINTS exist. that is really dope isn't it? So, what are you waiting for? Go ahead, use it 😄

if you do not know none of the bonus files, check this out 👇

CSS RESET https://piccalil.li/blog/a-modern-css-reset/
PX TO REM https://css-tricks.com/snippets/sass/px-to-em-functions/
BREAKPOINTS https://github.com/nirazul/include-media-or

Clone/Download it

git clone https://github.com/itsaslanov/stylesheets.git

also thanks to https://sass-guidelin.es/ 👍

if you like it, don't forget to follow me ♥️