Sass — Partials

What are partials?

Files starting with _ are not compiled to CSS:

scss/
├── _variables.scss
├── _mixins.scss
├── _base.scss
├── _components.scss
└── main.scss

Creating partials

// _variables.scss
$primary: #3498db;
$font-size: 16px;

// _mixins.scss
@mixin flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

Importing partials

// main.scss
@use 'variables';
@use 'mixins';
@use 'base';
@use 'components';

Recommended structure

scss/
├── abstracts/
│   ├── _variables.scss
│   ├── _mixins.scss
│   └── _functions.scss
├── base/
│   ├── _reset.scss
│   └── _typography.scss
├── components/
│   ├── _buttons.scss
│   ├── _cards.scss
│   └── _forms.scss
├── layout/
│   ├── _header.scss
│   ├── _footer.scss
│   └── _grid.scss
└── main.scss

Index file

// components/_index.scss
@forward 'buttons';
@forward 'cards';
@forward 'forms';

Benefits

• Organization: Related styles grouped together
• Maintainability: Easy to find and update styles
• Reusability: Share between projects
• Collaboration: Multiple devs work on different files

Mini Practice

1. Create a _variables.scss partial
2. Create a _mixins.scss partial
3. Build an index file to forward all modules
4. Organize a project with folder structure

Up Next

Continue with Build Process — integrating Sass into your workflow.