Sass Architecture — Complete Guide

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

Sass architecture organizes stylesheets using the 7-1 pattern, ITCSS, or modular approaches with clear Separation Of Concerns for scalable maintainable CSS.

What You'll Learn

• The 7-1 pattern (7 folders, 1 main file)
• ITCSS (Inverted Triangle CSS) approach
• Component-based architecture
• File naming conventions
• Import order and dependency management
• Design system integration

Why It Matters

• Poorly organized CSS is hard to maintain
• Architecture scales with team size
• Clear conventions prevent conflicts
• Modular code is easier to refactor

Real-World Use

• A design team uses the 7-1 pattern for a component library
• A large e-commerce site uses ITCSS for predictable specificity
• A startup uses a simple component-based structure
• A team migrates from flat CSS to structured Sass

flowchart LR
  A[Sass Architecture] --> B[7-1 Pattern]
  A --> C[ITCSS]
  A --> D[Component-Based]
  B --> E[abstracts/]
  B --> F[base/]
  B --> G[components/]
  B --> H[layout/]
  B --> I[pages/]
  B --> J[themes/]
  B --> K[vendors/]

Architecture Patterns

Code Example: 7-1 Pattern Structure

styles/
    abstracts/
        _variables.scss     # Design tokens
        _mixins.scss        # Reusable mixins
        _functions.scss     # Custom functions
        _placeholders.scss  # %placeholder selectors
    base/
        _reset.scss         # CSS reset/normalize
        _typography.scss    # Type styles
        _animations.scss    # Keyframes
    components/
        _button.scss        # Button component
        _card.scss          # Card component
        _nav.scss           # Navigation
        _form.scss          # Form elements
        _modal.scss         # Modal dialog
    layout/
        _header.scss        # Header layout
        _footer.scss        # Footer layout
        _grid.scss          # Grid system
        _sidebar.scss       # Sidebar
    pages/
        _home.scss          # Homepage specific
        _about.scss         # About page
        _contact.scss       # Contact page
    themes/
        _default.scss       # Default theme
        _dark.scss          # Dark theme
    vendors/
        _bootstrap.scss     # Bootstrap overrides
        _external-lib.scss  # Third-party CSS
    main.scss               # Entry point

// main.scss - Entry point (7-1 pattern)
// Order matters for cascade and dependency

// 1. Abstracts (no CSS output)
@use 'abstracts/variables';
@use 'abstracts/mixins';
@use 'abstracts/functions';
@use 'abstracts/placeholders';

// 2. Vendors (external)
@use 'vendors/bootstrap';

// 3. Base (reset, typography)
@use 'base/reset';
@use 'base/typography';
@use 'base/animations';

// 4. Layout (grid, header, footer)
@use 'layout/grid';
@use 'layout/header';
@use 'layout/footer';
@use 'layout/sidebar';

// 5. Components (reusable pieces)
@use 'components/button';
@use 'components/card';
@use 'components/nav';
@use 'components/form';
@use 'components/modal';

// 6. Pages (page-specific overrides)
@use 'pages/home';
@use 'pages/about';
@use 'pages/contact';

// 7. Themes (optional overrides)
@use 'themes/default';
@use 'themes/dark';

Code Example: ITCSS (Inverted Triangle CSS)

// ITCSS layers (high to low specificity)
// 1. Settings - Variables and config (no output)
// 2. Tools - Mixins and functions (no output)
// 3. Generic - Reset, box-sizing
// 4. Elements - Bare HTML element styles
// 5. Objects - Layout classes (.grid, .container)
// 6. Components - UI components (.button, .card)
// 7. Utilities - Override helpers (.hidden, .text-center)

// settings/_variables.scss
$primary: #0066CC;
$gutter: 16px;

// tools/_mixins.scss
@mixin respond-to($bp) { /* ... */ }

// generic/_reset.scss
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; }

// elements/_typography.scss
h1, h2, h3 { margin: 0; }
a { color: $primary; }

// objects/_grid.scss
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 $gutter;
}

// components/_button.scss
.button { /* Component styles */ }

// utilities/_helpers.scss
.text-center { text-align: center; }
.sr-only { /* Screen reader only */ }

Code Example: Component-Based Architecture

// Each component is self-contained in its own file
// components/_button.scss

@use '../abstracts/variables' as v;
@use '../abstracts/mixins' as m;

// Block class
.button {
    $root: &;

    display: inline-flex;
    align-items: center;
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 4px;
    font-size: 1rem;
    cursor: pointer;
    min-height: 44px;
    text-decoration: none;
    transition: all 0.2s ease;

    // Elements
    &__icon {
        width: 20px;
        height: 20px;
        margin-right: 0.5rem;
    }

    &__text {
        font-weight: 500;
    }

    // Modifiers
    &--primary {
        background: v.$primary;
        color: #fff;

        &:hover {
            background: darken(v.$primary, 10%);
        }
    }

    &--secondary {
        background: transparent;
        color: v.$primary;
        border: 2px solid v.$primary;
    }

    &--large {
        padding: 1rem 2rem;
        font-size: 1.125rem;
    }

    &--small {
        padding: 0.5rem 1rem;
        font-size: 0.875rem;
    }

    // States
    &:disabled,
    &.is-disabled {
        opacity: 0.5;
        cursor: not-allowed;
        pointer-events: none;
    }

    // Contextual styling
    .dark-mode & {
        &--primary {
            background: lighten(v.$primary, 10%);
        }
    }
}

Expected output: Each component file is independent and contains all styles for that component (block, elements, modifiers, states, and contextual variations).

Common Mistakes

1. No architecture at all — All styles in a single file that grows to thousands of lines.
2. Wrong import order — Importing variables after components that use them causes undefined variable errors.
3. Over-engineering for small projects — A 3-page site does not need 7 folders. Choose an architecture proportional to the project.
4. Mixing multiple architectures — Combining 7-1 and ITCSS patterns inconsistently creates confusion.
5. Not using namespacing with @use — Without namespaces, variable conflicts can occur. Use namespaced @use.
6. Page-specific styles in component files — Page-specific overrides should be in pages/ or applied as utility classes.
7. Deep file nesting — Keep directory depth to 2-3 levels. Deeper nesting is harder to navigate.

Practice Questions

1. What is the 7-1 pattern? 7 folders (abstracts, base, components, layout, pages, themes, vendors) and 1 main.scss entry point.
2. What is the principle behind ITCSS? Organize CSS from low specificity to high specificity (settings, tools, generic, elements, objects, components, utilities).
3. What should go in the abstracts/ folder? Variables, mixins, functions, and placeholders that do not generate CSS output.
4. Why should page-specific styles be separated from component styles? Components are reusable. Page styles are specific to one page. Mixing them makes reuse harder.

FAQ

Mini Project

Set up a complete Sass project using the 7-1 pattern. Create all 7 folders with appropriate _index.scss barrel files for @forward. Create at least 3 components in components/ (button, card, nav) with BEM naming. Create 2 layout files (header, grid). Create a variables file with design tokens. Create a reset. Create a main.scss entry point that uses @use for all modules. Compile and verify the output. Then refactor the same project using ITCSS layers and compare the organization. Document which approach you prefer and why.

What's Next

Continue with Lesson 16: Sass and BEM to learn combining Sass with the BEM methodology.