SCSS Partials

Understanding partials and organizing your SCSS into a clean folder structure.

What Are SCSS Partials?

SCSS partials are separate small SCSS files that store reusable code like variables, mixins, resets, and components. They make your project cleaner and easier to maintain.

Why Use Partials?

Better folder structure
Reusable components
Easier maintenance on large projects
Cleaner separation of concerns

SCSS Folder Structure:

scss/
│
├── base/
│   ├── _reset.scss
│   ├── _typography.scss
│
├── components/
│   ├── _buttons.scss
│   ├── _cards.scss
│
├── layout/
│   ├── _header.scss
│   ├── _footer.scss
│   ├── _grid.scss
│
├── utils/
│   ├── _variables.scss
│   ├── _mixins.scss
│
└── main.scss   // imported file

Example of Importing Partials:

// main.scss
@import "utils/variables";
@import "utils/mixins";
@import "base/reset";
@import "components/buttons";

Example Partial Code:

// _variables.scss
$primary: #0077ff;
$radius: 10px;

// _buttons.scss
.button {
  background: $primary;
  padding: 12px 20px;
  border-radius: $radius;
  color: #fff;
}