Organizing SCSS Files: A Structured Approach

We’ll look at how to organise SCSS files. Partials, imports, and a sensible folder structure for larger projects.

Why organise your SCSS files?

A small project can get away with one SCSS file. Once it grows, finding anything becomes a pain. Splitting styles into logical partials and importing them into a main file keeps things navigable and makes collaboration easier.

A modular approach

SCSS supports partials and imports, which suit a modular structure – separate files for variables, mixins, components, and so on, all pulled into one main file.

Partials

Partials are SCSS files named with a leading underscore (_). The underscore signals they are not compiled on their own – they are imported into a main file.

Common partials:

• _variables.scss for variables
• _mixins.scss for mixins
• _buttons.scss for button styles
• _headers.scss for header styles

The main file

The main file (often styles.scss) imports all your partials. Import order matters – it affects the cascade in the compiled CSS.

@import 'variables';
@import 'mixins';
@import 'buttons';
@import 'headers';
// More imports...

Structuring your partials

Common ways to split partials:

1. Base: resets, typography, basic elements (_base.scss, _typography.scss, _reset.scss).
2. Components: individual UI pieces like buttons, cards, modals (_buttons.scss, _cards.scss).
3. Layout: grids, headers, footers (_grid.scss, _header.scss, _footer.scss).
4. Pages: styles for specific pages (_home.scss, _about.scss).
5. Themes: light/dark themes if needed (_theme-light.scss, _theme-dark.scss).
6. Utilities: helper classes (_utilities.scss).

Naming conventions

Pick a naming convention and stick to it. BEM, OOCSS, SMACSS – whichever fits your project. Consistency matters more than which one you choose.

Organising media queries

Two common approaches:

1. Inside selectors: nest media queries within the relevant selector. Keeps related styles together, but can duplicate rules in the compiled CSS.

   .container {
     width: 100%;

     @media (min-width: 768px) {
       width: 750px;
     }
   }

2. Separate partials: put all media queries in a file like _responsive.scss. Centralises responsive styles but separates them from their base rules.

Example structure

A small project might look like this:

• styles.scss: main file importing all partials
• _variables.scss: colours, fonts, etc.
• _mixins.scss: reusable mixins
• _base.scss: basic element styles
• _layout.scss: grid system, header, footer
• _buttons.scss, _cards.scss: component styles
• _utilities.scss: utility/helper classes
• _responsive.scss: media queries

Using comments for clarity

A brief comment at the top of each partial explaining what it contains saves time on larger projects. Especially when someone else (or future you) needs to find something quickly.

Spending ten minutes planning your file structure upfront saves hours of hunting through a single giant stylesheet later.