SCSS Functions - Berechnungen und Logik

Functions returnen Werte - perfekt für Berechnungen und Logik.

Built-in Functions

Color Functions

$primary: #007bff;

.button {
  background: $primary;

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

  &:active {
    background: darken($primary, 20%);
  }
}

// Andere Color Functions
$color: #007bff;
lighten($color, 20%)
darken($color, 20%)
saturate($color, 20%)
desaturate($color, 20%)
adjust-hue($color, 30deg)
rgba($color, 0.5)
mix($color1, $color2, 50%)

Math Functions

@use "sass:math";

.box {
  width: math.div(100%, 3); // 33.333%
  padding: math.round(16.7px); // 17px
  margin: math.ceil(4.3px); // 5px
  border-width: math.floor(2.7px); // 2px
}

$number: -42;
$abs: math.abs($number); // 42
$min: math.min(1px, 2px, 3px); // 1px
$max: math.max(1px, 2px, 3px); // 3px

String Functions

@use "sass:string";

$class: "btn";
$modifier: "primary";

.#{$class}-#{$modifier} {
  // .btn-primary
}

string.to-upper-case("hello") // "HELLO"
string.to-lower-case("WORLD") // "world"
string.length("hello") // 5
string.index("hello", "ll") // 3

Custom Functions

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

.text {
  font-size: calculate-rem(18px); // 1.125rem
  margin: calculate-rem(24px); // 1.5rem
}

Functions mit Conditions

@function contrast-color($bg-color) {
  @if (lightness($bg-color) > 50%) {
    @return #000;
  } @else {
    @return #fff;
  }
}

.button {
  $bg: #007bff;
  background: $bg;
  color: contrast-color($bg); // weiß
}

@use "sass:math";
@use "sass:color";
@use "sass:string";

// ========================================
// Spacing Functions
// ========================================

@function spacing($multiplier) {
  $base: 8px;
  @return $base * $multiplier;
}

// Usage: padding: spacing(2); // 16px

// ========================================
// Responsive Font Size
// ========================================

@function fluid-font($min, $max, $min-vw: 320px, $max-vw: 1200px) {
  $slope: math.div($max - $min, $max-vw - $min-vw);
  $intercept: $min - $slope * $min-vw;
  @return clamp(#{$min}px, #{$intercept}px + #{$slope * 100}vw, #{$max}px);
}

// Usage: font-size: fluid-font(16, 24);

// ========================================
// Color Tinting
// ========================================

@function tint($color, $percentage) {
  @return mix(white, $color, $percentage);
}

@function shade($color, $percentage) {
  @return mix(black, $color, $percentage);
}

// ========================================
// Strip Unit
// ========================================

@function strip-unit($number) {
  @if type-of($number) == "number" and not unitless($number) {
    @return math.div($number, $number * 0 + 1);
  }
  @return $number;
}

// ========================================
// Contrast Color
// ========================================

@function contrast-color($color, $dark: #000, $light: #fff) {
  @if (color.lightness($color) > 50%) {
    @return $dark;
  } @else {
    @return $light;
  }
}

@return vs @mixin

Function:

@function double($value) {
  @return $value * 2;
}

.box {
  width: double(50px); // 100px
}

Mixin:

@mixin double-width($value) {
  width: $value * 2;
}

.box {
  @include double-width(50px);
}

Wann was?

• Function: Returnt einzelne Werte
• Mixin: Returnt Style-Blöcke

Viel Erfolg! 🚀