SCSS Control Directives - Logik im Stylesheet

Control Directives bringen Programmier-Logik in SCSS.

@if / @else

$theme: dark;

.button {
  @if $theme == dark {
    background: #333;
    color: white;
  } @else {
    background: white;
    color: #333;
  }
}

Mit @else if

$size: medium;

.button {
  @if $size == small {
    padding: 5px 10px;
  } @else if $size == medium {
    padding: 10px 20px;
  } @else if $size == large {
    padding: 15px 30px;
  } @else {
    padding: 10px 20px;
  }
}

@for Loop

// through (inklusiv)
@for $i from 1 through 3 {
  .col-#{$i} {
    width: 100% / 3 * $i;
  }
}

// Output:
// .col-1 { width: 33.333%; }
// .col-2 { width: 66.666%; }
// .col-3 { width: 100%; }

// to (exklusiv)
@for $i from 1 to 3 {
  .item-#{$i} { /* 1, 2 (nicht 3) */ }
}

@each Loop

Mit Lists

$colors: red, green, blue;

@each $color in $colors {
  .text-#{$color} {
    color: $color;
  }
}

// Output:
// .text-red { color: red; }
// .text-green { color: green; }
// .text-blue { color: blue; }

Mit Maps

$colors: (
  "primary": #007bff,
  "secondary": #6c757d,
  "success": #28a745
);

@each $name, $color in $colors {
  .btn-#{$name} {
    background: $color;
  }
}

// Output:
// .btn-primary { background: #007bff; }
// .btn-secondary { background: #6c757d; }
// .btn-success { background: #28a745; }

@while Loop

$i: 1;

@while $i <= 3 {
  .width-#{$i} {
    width: $i * 100px;
  }
  $i: $i + 1;
}

// Output:
// .width-1 { width: 100px; }
// .width-2 { width: 200px; }
// .width-3 { width: 300px; }

// Grid System Generator
@for $i from 1 through 12 {
  .col-#{$i} {
    width: percentage(math.div($i, 12));
  }
}

// Spacing Utilities
$spacings: (
  "xs": 4px,
  "sm": 8px,
  "md": 16px,
  "lg": 24px,
  "xl": 32px
);

@each $name, $size in $spacings {
  .m-#{$name} { margin: $size; }
  .p-#{$name} { padding: $size; }
  .mt-#{$name} { margin-top: $size; }
  .mb-#{$name} { margin-bottom: $size; }
}

// Responsive Breakpoints
$breakpoints: (
  "sm": 576px,
  "md": 768px,
  "lg": 992px,
  "xl": 1200px
);

@each $name, $width in $breakpoints {
  @media (min-width: $width) {
    .container-#{$name} {
      max-width: $width - 20px;
    }
  }
}

Viel Erfolg! 🚀