SCSS Partials & Imports - Modularer Code

Partials und das Module System organisieren SCSS Code professionell.

Partials

Partials sind SCSS-Dateien mit _ Prefix:

scss/
├── _variables.scss
├── _mixins.scss
├── _buttons.scss
└── main.scss

Warum _?

• Werden nicht direkt zu CSS kompiliert
• Nur über @use/@import verwendbar

@use vs @import

❌ @import (Deprecated)

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

// Problem: Alles global!

✅ @use (Modern)

@use "variables";
@use "mixins";

.button {
  background: variables.$primary-color;
  @include mixins.flex-center;
}

Vorteile:

• Namespaces
• Keine Duplikate
• Bessere Performance

Namespaces

// _colors.scss
$primary: blue;
$secondary: gray;

// main.scss
@use "colors";

.button {
  background: colors.$primary;
}

Custom Namespace

@use "colors" as c;

.button {
  background: c.$primary;
}

Kein Namespace

@use "colors" as *;

.button {
  background: $primary; // Direkt zugänglich
}

File Organization

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

Index Files

// abstracts/_index.scss
@forward "variables";
@forward "mixins";
@forward "functions";

// main.scss
@use "abstracts"; // Lädt alle abstracts

.button {
  background: abstracts.$primary;
}

// abstracts/_variables.scss
$primary: #007bff;
$secondary: #6c757d;

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

// abstracts/_index.scss
@forward "variables";
@forward "mixins";

// components/_buttons.scss
@use "../abstracts" as *;

.btn {
  padding: 10px 20px;

  &-primary {
    background: $primary;
  }

  &-center {
    @include flex-center;
  }
}

// main.scss
@use "abstracts";
@use "components/buttons";

@forward

Reexport von Partials:

// _index.scss
@forward "variables";
@forward "mixins";
@forward "functions";

// main.scss
@use "abstracts"; // Alle abstracts verfügbar

Private Members

// _variables.scss
$public-color: blue;
$_private-color: gray; // _ macht private

// main.scss
@use "variables";

.text {
  color: variables.$public-color; // ✅ OK
  color: variables.$_private-color; // ❌ Error
}

Viel Erfolg! 🚀