SCSS Operators - Berechnungen im Stylesheet

SCSS unterstützt mathematische und logische Operatoren.

Math Operators

@use "sass:math";

.box {
  width: 100px + 50px; // 150px
  height: 200px - 50px; // 150px
  padding: 10px * 2; // 20px
  margin: math.div(60px, 3); // 20px
  font-size: 16px * 1.5; // 24px
}

// Mit Variables
$base-size: 16px;
$multiplier: 1.5;

.text {
  font-size: $base-size * $multiplier; // 24px
}

Comparison Operators

$width: 100px;

@if $width > 50px {
  .box { width: $width; }
}

// ==, !=, <, >, <=, >=
$value: 10;
$value == 10 // true
$value != 5 // true
$value > 5 // true

String Operators

$prefix: "btn";
$modifier: "primary";

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

// Concatenation
$class: $prefix + "-" + $modifier; // "btn-primary"

Color Operators

$color: #010203;

.box {
  color: $color + #040506; // #050709
  background: $color * 2; // #020406
}

// Besser: Built-in Functions nutzen
@use "sass:color";

.box {
  color: color.adjust($color, $lightness: 20%);
}

Viel Erfolg! 🚀