SCSS Nesting - Hierarchische Styles

Nesting macht SCSS Styles strukturierter und lesbarer als CSS.

Basic Nesting

CSS vs SCSS

CSS:

.nav {
  background: white;
}

.nav ul {
  list-style: none;
}

.nav li {
  display: inline-block;
}

.nav a {
  text-decoration: none;
}

SCSS:

.nav {
  background: white;

  ul {
    list-style: none;
  }

  li {
    display: inline-block;
  }

  a {
    text-decoration: none;
  }
}

Viel übersichtlicher und strukturierter!

Parent Selector (&)

Der & Selector referenziert das Parent Element:

Pseudo-Classes

.button {
  background: blue;
  color: white;

  &:hover {
    background: darkblue;
  }

  &:active {
    background: navy;
  }

  &:disabled {
    opacity: 0.5;
  }
}

// Kompiliert zu:
// .button:hover { ... }
// .button:active { ... }
// .button:disabled { ... }

Pseudo-Elements

.input {
  border: 1px solid gray;

  &::placeholder {
    color: lightgray;
  }

  &::before {
    content: "";
  }

  &::after {
    content: "";
  }
}

Modifier Classes

.button {
  padding: 10px 20px;

  &-primary {
    background: blue;
  }

  &-secondary {
    background: gray;
  }

  &-large {
    padding: 15px 30px;
  }
}

// Kompiliert zu:
// .button-primary
// .button-secondary
// .button-large

Compound Selectors

.message {
  padding: 10px;
  border: 1px solid gray;

  .icon & {
    padding-left: 40px;
  }
}

// Kompiliert zu:
// .icon .message { padding-left: 40px; }

Nesting Best Practices

✅ Gut: Max 3-4 Levels

.card {
  padding: 20px;

  .card-header {
    border-bottom: 1px solid gray;

    .card-title {
      font-size: 24px;
    }
  }
}

❌ Schlecht: Zu tief

.page {
  .container {
    .row {
      .col {
        .card {
          .card-body {
            .card-text {
              // 7 Levels! ❌
            }
          }
        }
      }
    }
  }
}

Besser: Flachere Struktur

.card-text {
  // Direkt stylen
}

Property Nesting

CSS Properties mit gemeinsamen Namespace:

.box {
  font: {
    family: Arial, sans-serif;
    size: 16px;
    weight: bold;
  }

  margin: {
    top: 10px;
    bottom: 20px;
  }

  border: {
    width: 1px;
    style: solid;
    color: gray;
    radius: 4px;
  }
}

// Kompiliert zu:
// font-family: Arial, sans-serif;
// font-size: 16px;
// etc.

⚠️ Nicht üblich - normale Syntax ist klarer!

Media Queries in Nesting

.sidebar {
  width: 300px;
  float: left;

  @media (max-width: 768px) {
    width: 100%;
    float: none;
  }
}

// Kompiliert zu:
// .sidebar { width: 300px; float: left; }
// @media (max-width: 768px) {
//   .sidebar { width: 100%; float: none; }
// }

Mit Variables

$breakpoint-md: 768px;

.container {
  padding: 20px;

  @media (min-width: $breakpoint-md) {
    max-width: 720px;
  }
}

BEM Pattern mit Nesting

BEM = Block Element Modifier

// Block
.card {
  padding: 20px;
  border: 1px solid gray;

  // Element
  &__header {
    border-bottom: 1px solid gray;
    margin-bottom: 10px;
  }

  &__title {
    font-size: 24px;
    font-weight: bold;
  }

  &__body {
    font-size: 16px;
  }

  &__footer {
    border-top: 1px solid gray;
    margin-top: 10px;
  }

  // Modifier
  &--highlighted {
    border-color: blue;
    background: lightblue;
  }

  &--large {
    padding: 30px;
  }
}

// Kompiliert zu:
// .card { ... }
// .card__header { ... }
// .card__title { ... }
// .card--highlighted { ... }

Advanced Nesting Patterns

Combining Parent Selectors

.button {
  background: blue;

  .dark-theme & {
    background: darkblue;
  }

  .light-theme & {
    background: lightblue;
  }

  body.rtl & {
    text-align: right;
  }
}

// Kompiliert zu:
// .dark-theme .button { background: darkblue; }
// .light-theme .button { background: lightblue; }
// body.rtl .button { text-align: right; }

State Classes

.dropdown {
  display: none;
  position: absolute;

  &.is-open {
    display: block;
  }

  &.is-loading {
    opacity: 0.5;
  }

  &.has-error {
    border-color: red;
  }
}

// Navigation mit verschachteltem SCSS
.navbar {
  background: white;
  padding: 1rem 0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

  // Container
  &__container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  // Brand/Logo
  &__brand {
    font-size: 1.5rem;
    font-weight: bold;
    color: $primary-color;
    text-decoration: none;

    &:hover {
      color: darken($primary-color, 10%);
    }
  }

  // Navigation Menu
  &__menu {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;

    @media (max-width: 768px) {
      flex-direction: column;
      position: absolute;
      top: 100%;
      left: 0;
      right: 0;
      background: white;
      display: none;

      &.is-open {
        display: flex;
      }
    }
  }

  // Menu Items
  &__item {
    margin: 0 0.5rem;

    @media (max-width: 768px) {
      margin: 0;
      border-bottom: 1px solid $gray-200;
    }
  }

  // Links
  &__link {
    display: block;
    padding: 0.5rem 1rem;
    color: $gray-700;
    text-decoration: none;
    transition: $transition-base;

    &:hover {
      color: $primary-color;
      background: $gray-100;
    }

    &--active {
      color: $primary-color;
      font-weight: bold;
    }
  }

  // Mobile Toggle
  &__toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;

    @media (max-width: 768px) {
      display: block;
    }

    &-icon {
      width: 24px;
      height: 2px;
      background: $gray-700;
      display: block;
      position: relative;

      &::before,
      &::after {
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        background: $gray-700;
        left: 0;
      }

      &::before {
        top: -8px;
      }

      &::after {
        bottom: -8px;
      }
    }
  }

  // Modifiers
  &--fixed {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: $zindex-fixed;
  }

  &--transparent {
    background: transparent;
    box-shadow: none;
  }
}

// ✅ Regel: Max 3-4 Levels
.component {
  .element {
    .sub-element {
      // OK - 3 Levels
    }
  }
}

.component {
  color: blue;

  @at-root {
    .global-class {
      // Kompiliert zu .global-class (nicht .component .global-class)
    }
  }
}

.button {
  &.primary,
  &.secondary,
  &.success {
    padding: 10px 20px;
  }
}

// Kompiliert zu:
// .button.primary, .button.secondary, .button.success { ... }

.page .container .row .col .card .card-body .card-text {
  // Specificity zu hoch!
}

.card-text {
  // Flach und spezifisch
}

.box {
  font: {
    family: Arial;
    size: 16px;
  }
  margin: {
    top: 10px;
  }
}

.box {
  font-family: Arial;
  font-size: 16px;
  margin-top: 10px;
}

.button {
  & .icon {
    // Erstellt: .button .icon (Space!)
  }
}

.button {
  &__icon {
    // Erstellt: .button__icon (kein Space)
  }
}

Nächste Schritte

Als Nächstes lernst du:

• Mixins für wiederverwendbare Styles
• Functions für Berechnungen
• Extend/Inheritance
• Control Directives

Viel Erfolg! 🚀