SCSS 2 CSS Konverter

Sass/SCSS konvertieren inkl. sourceMapping

Original Sass / SCSS String

Sass/SCSS Code einfügen

@function rem($px, $base: 16) {
  @return ($px / ($base * 1px)) * 1rem;
}

@mixin button-variant($bg, $color: #fff) {
  background: $bg;
  color: $color;

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

&:active {
    background: darken($bg, 18%);
  }
}

@mixin flex-center($gap: 0) {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: $gap;
}

%reset-border {
  border: none;
  outline: none;
}

$primary: #1e88e5;
$danger: #e53935;
$sizes: (
  sm: 8px,
  md: 14px,
  lg: 20px
);

.btn {
  @extend %reset-border;
  @include flex-center(rem(6px));
  display: inline-flex;
  padding: rem(10px) rem(20px);
  border-radius: rem(6px);
  cursor: pointer;
  transition: background 0.2s ease, transform 0.15s ease;

@include button-variant($primary);

&--danger {
    @include button-variant($danger);
  }

&--outline {
    background: transparent;
    border: 1px solid $primary;
    color: $primary;
  }

@each $name, $size in $sizes {
    &--#{$name} {
      padding: rem($size) rem($size * 2);
    }
  }
}

Formatieren

Minified CSS inkl. sourceMapping

# Kein Sass/SCSS formatiert

Der originale Sass / SCSS Code wird nur temporär an den Server gesendet, aber dort nicht gespeichert. Direkt nach der Umwandlung in CSS Code, werden verwendete Übergaben vollständig vom Server entfernt.