Sass (SCSS) CSS-Präprozessor Spickzettel

Sass ist ein ausgereifter, stabiler und leistungsstarker CSS-Präprozessor mit Variablen, Verschachtelung, Mixins und Modulen.

Variablen und Verschachtelung (Variables & Nesting)

$primary-color: #2563eb;
$border-radius: 8px;

.card {
  background: #ffffff;
  border-radius: $border-radius;

  .title {
    color: $primary-color;
  }

  &:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  }

  &__header {
    padding: 16px;
  }
}

---

Mixins und Funktionen (Mixins & Functions)

// Define reusable mixin with default arguments
@mixin flex-center($direction: row) {
  display: flex;
  flex-direction: $direction;
  align-items: center;
  justify-content: center;
}

.hero {
  @include flex-center(column);
  height: 400px;
}

// Functions & Calculations
@use 'sass:math';

@function rem($pixels) {
  @return math.div($pixels, 16px) * 1rem;
}

.heading {
  font-size: rem(32px); // => 2rem
}

---

Modernes Modulsystem (@use und @forward)

// _variables.scss
$theme-accent: #10b981;

// main.scss
@use 'variables' as vars;

.button {
  background-color: vars.$theme-accent;
}

---

Verwandte Spickzettel

• Stylus
• Less