Sass Partials & Import — Modular File Organization

In this tutorial, you will learn about Sass Partials & Import. We cover key concepts, practical examples, and best practices to help you master this topic.

Sass partials are modular files prefixed with underscore _ that are imported into other files using @import, enabling organized and maintainable stylesheet architectures.

What You'll Learn

You will learn how to create partial files, use @import to combine them, understand the naming conventions, and organize a stylesheet project with partials.

Why It Matters

Partials keep stylesheets organized. DodaTech's projects use 20+ partials categorized into base, components, layouts, and utilities for maintainable code.

Real-World Use

Durga Antivirus Pro's dashboard uses separate partials for variables, reset, typography, buttons, forms, tables, cards, modals, and responsive breakpoints.

flowchart LR
    A[Parent Selector] --> B[Partials & Import]
    B --> C[Naming Convention]
    B --> D[@import Usage]
    B --> E[Project Structure]
    B --> F[Order Matters]
    style B fill:#c69,stroke:#c69,color:#fff
    style E fill:#22c55e,stroke:#16a34a,color:#fff

What Is a Partial?

A partial is a Sass file starting with an underscore, like _variables.scss. The underscore tells Sass not to compile it into a separate CSS file. Instead, it gets imported into a main file.

// _variables.scss (partial — no separate CSS output)
$primary: #7c3aed;
$font-stack: "Inter", sans-serif;

// _buttons.scss (partial)
.button {
  background: $primary;
  font-family: $font-stack;
}

// main.scss (the compiled entry point)
@import "variables";
@import "buttons";

Expected output: main.scss compiles to main.css containing both variables and button styles. No _variables.css or _buttons.css files are generated.

Import Syntax

// Import without underscore or extension
@import "variables";
@import "base/typography";
@import "components/buttons";
@import "layouts/header";

// Import multiple files
@import "reset", "variables", "mixins", "base";

// Nested import (import inside a selector)
.dark-theme {
  @import "dark-variables";
}

Expected output: Each @import compiles as if the partial's content was written inline at that location.

Project Structure

scss/
  main.scss              // Entry point
  _variables.scss        // Design tokens
  _mixins.scss           // Reusable mixins
  _functions.scss        // Custom functions
  base/
    _reset.scss          // CSS reset/normalize
    _typography.scss     // Headings, body, links
  components/
    _buttons.scss        // Button styles
    _cards.scss          // Card component
    _forms.scss          // Form elements
    _modals.scss         // Modal overlays
    _navbar.scss         // Navigation
  layouts/
    _header.scss         // Header layout
    _footer.scss         // Footer layout
    _grid.scss           // Grid system
  pages/
    _home.scss           // Home page specific
    _dashboard.scss      // Dashboard specific
  themes/
    _light.scss          // Light theme
    _dark.scss           // Dark theme
  vendors/
    _bootstrap.scss      // Bootstrap overrides

Main Entry Point

// main.scss — imports in correct order

// 1. Tools
@import "variables";
@import "mixins";
@import "functions";

// 2. Base
@import "base/reset";
@import "base/typography";

// 3. Layout
@import "layouts/grid";
@import "layouts/header";
@import "layouts/footer";

// 4. Components
@import "components/buttons";
@import "components/cards";
@import "components/forms";
@import "components/modals";

// 5. Themes
@import "themes/light";
@import "themes/dark";

Expected output: A single compiled CSS file with all styles in the correct cascade order.

Import Order Importance

Variables and mixins must be imported before components that use them:

// WRONG — button uses $primary before it is defined
@import "components/buttons";
@import "variables";    // $primary defined too late

// CORRECT
@import "variables";    // $primary defined first
@import "components/buttons";

Expected output: The correct order compiles without errors. The wrong order causes "Undefined variable" errors.

Default Variables in Partials

// _variables.scss
$primary: #7c3aed !default;
$secondary: #64748b !default;

// main.scss
$primary: #2563eb;  // Override before import
@import "variables";

Expected output: $primary is blue (overridden), $secondary is gray (default used).

Common Mistakes

1. Importing CSS Files

Sass @import of .css files copies the file content literally, without Sass processing. Use native CSS @import for CSS files.

2. Circular Imports

File A imports file B which imports file A. This creates a circular dependency and may cause compilation errors.

3. Underscore in @import Path

Do not include the underscore or extension in the import path: @import "variables" not @import "_variables.scss".

4. Too Many Partial Files

Each partial adds overhead. Find a balance between organization and too many tiny files. 10-30 partials is typical.

5. Wrong Import Order

Importing components before their dependencies (variables, mixins) causes compilation errors.

Practice Questions

1. What does the underscore prefix in _variables.scss mean? It marks the file as a partial that should not be compiled to its own CSS file.

2. How do you import a partial named _buttons.scss? @import "buttons"; — omit the underscore and extension.

3. Why does import order matter? Variables and mixins must be imported before the files that use them.

4. How many partials should a project have? 10-30 partials is typical. Split by category (base, components, layouts) but avoid tiny single-property files.

5. Can you import files from subdirectories? Yes. Use the relative path: @import "components/buttons".

Challenge

Create a project structure with at least 6 partials organized into base, components, and utilities folders. The main.scss should import them in the correct order. Verify the compiled CSS contains all styles.

FAQ

Mini Project

Organize a 200-line CSS file into 5 partials: _variables.scss, _reset.scss, _layout.scss, _components.scss, and _utilities.scss. Create a main.scss that imports them. Verify the compiled output matches the original.

What's Next

Learn Sass Modules (@use and @forward) for modern module management with namespaces. Then explore Sass Mixins for reusable style blocks.