Sass Partials and Import

Sass Tutorial

Sass Partials and Import

Sass Partials and Import help you break a large stylesheet into smaller, reusable, and well-organized files.
This is extremely useful in large projects and team environments.

 What Are Sass Partials?

A partial is a Sass file whose name starts with an underscore (_).
Sass knows that these files are not compiled into separate CSS files.

Example Partial File

_variables.scss
_buttons.scss
_header.scss

✔ The underscore tells Sass this file is a helper file.

Creating a Partial

_variables.scss

$primary-color: #0d6efd;
$padding: 15px;

_buttons.scss

.button {
padding: $padding;
background-color: $primary-color;
color: white;
}

 Importing Partials (@import)

Use @import to include partials into a main file.

style.scss

@import "variables";
@import "buttons";

✔ No underscore (_)
✔ No file extension (.scss)

 Folder Structure (Best Practice)

scss/
│── base/
│ └── _variables.scss
│ └── _reset.scss
│
│── components/
│ └── _buttons.scss
│ └── _cards.scss
│
│── layout/
│ └── _header.scss
│ └── _footer.scss
│
│── style.scss

Import Order Matters

Variables & mixins should be imported before they are used.

@import "base/variables";
@import "components/buttons";
@import "layout/header";

Difference Between CSS @import and Sass @import

CSS @import Sass @import
Creates extra HTTP requests No extra requests
Slower performance Faster
Limited usage Full Sass support

Modern Alternative: @use (Recommended)

⚠️ Sass @import is deprecated (still works).

Using @use

@use "variables";

.button {
background-color: variables.$primary-color;
}

✔ Prevents global scope pollution
✔ More maintainable

@forward (Advanced)

Used with @use to re-export files.

@forward "variables";

📌 Real-Life Example

main.scss

@import "base/variables";
@import "components/buttons";
@import "layout/header";

Compiled into:

/* Single CSS file */

📌 Summary of Sass Partials & Import

✔ Partials start with _
✔ Use @import to combine files
✔ Improves maintainability
✔ Prefer @use for new projects

You may also like...