How to structure SASS/SCSS styles

Today we see how to structure our projects based on sass/scss styles. From what I have noticed over time, not many know this evolution of the css that I now consider indispensable on some project dealing with design and Front-end.
An important thing to consider when talking about projects of this type is the structure that must be given to it, so that, when they grow, it will still be easy to get in touch without making too much confusion.
There is no 100% correct structure but I can give me “my version of the facts”.
You can group your styles into category directories and import them from a single core style, which allows you to keep all ordered and cataloged parts.
Everything starts from a single styles.scss file that will group all the others. Your html will then retrieve only what has been processed from that file (the styles.css that will be generated) and all the rest can be grouped into folders, as follows:

scss/
|– utilities/             // Utilities to use in other components
|   |– _variables.scss    // Sass Variables
|   |– _mixins.scss       // Sass Mixins
|   |– _reset.scss        // Reset for browsers
|   |– _fonts.scss        // Your fonts
|
|– components/            // Specific components
|   |– _modals.scss       // Modals
|   |– _buttons.scss      // Buttons
|   |– _alerts.scss       // Alerts
|
|– layout/                // Common components
|   |– _layout.scss       // All layout theme
|   |– _header.scss       // Header
|   |– _nav.scss          // Navigation menu
|   |– _footer.scss       // Footer
|   |– _forms.scss        // Forms
|
|– pages/                 // Specific page styles
|   |– _home.scss         // Specific styles for the Home page
|   |– _about.scss        // Specific styles for the About page
|   |– _gallery.scss      // Specific styles for a Gallery page
|
|– vendors/               // External styles includes
|   |– _bootstrap.scss    // Bootstrap
|
`– styles.scss            // Main core file

All styles that will be included must have an underscore (_) in front, which will allow watchers to know that those are styles to be imported only and will not be preprocessed when you go to edit them.

• Utilities: contains all the helpers, mixins, variables and everything that can be useful for the other components. Usually these files don’t output anything.
• Components: it contains all the specific components that will be included in the various pages, which can be overwritten at will when needed from the individual pages, through the SASS @extends function.
• Layout: contains all the common components, usually present on all pages. It also contains the basic theme (_layout.scss), such as generic links (<a>), the body, etc.
• Pages: contains the styles of the individual pages. For example, the home page usually contains specific styles that other pages do not contain.
• Vendors: it contains all the styles taken externally and included, such as the bootstrap styles (the grid system).

Then we have our core style (styles.scss), which will only take care of including the other styles, without adding anything.
An example:

// styles.scss
@import 'utilities/variables';
@import 'utilities/mixins';
@import 'utilities/reset';
@import 'utilities/fonts';

@import 'vendors/bootstrap';

@import 'layout/layout';
@import 'layout/header';
@import 'layout/nav';
@import 'layout/footer';
@import 'layout/forms';

@import 'components/modals';
@import 'components/buttons';
@import 'components/alerts';

@import 'pages/home';
@import 'pages/about';
@import 'pages/gallery';

The order in which the files are included is important to ensure that our more specific styles surely overwrite the more generic styles. For example, it is better to include bootstrap styles very high so that they do not mistakenly overwrite styles that we have chosen to give to our components.

As you can see from the example, it is not necessary to insert the underscore (_) or the extension (.scss) to include the files.

That’s all for today.
Try it at home!