Tạo alert với scss

$white: #fff !default;
$black: #000 !default;


$theme-colors: (
  "primary":    #0d6efd,
  "secondary":   #6c757d,
  "success":    #28a745,
  "info":       #17a2b8,
  "warning":    #ffc107,
  "danger":     #dc3545,
  "light":      #f8f9fa,
  "dark":       #343a40
) !default;
//
// Base styles
//
$alert-padding-y:                   .75rem !default;
$alert-padding-x:                   1.25rem !default;
$alert-margin-bottom:               1rem !default;

$alert-bg-level:                    -11 !default;
$alert-border-level:                -9 !default;
$alert-color-level:                 3 !default;

// Set a specific jump point for requesting color jumps
$theme-color-interval: 8% !default;

@function color-level($color: $primary, $level: 0) {
  $color-base: if($level > 0, $black, $white);
  $level: abs($level);

  @return mix($color-base, $color, $level * $theme-color-interval);
}

@mixin alert-variant($background, $border, $color) {
  color: $color;
  background-color: $background;
  border-color: $border;

  .alert-link {
    color: darken($color, 10%);
  }
}

.alert {
  position: relative;
  padding: $alert-padding-y $alert-padding-x;
  margin-bottom: $alert-margin-bottom;
  border: 1px solid transparent;
}
// Headings for larger alerts
.alert-heading {
  // Specified to prevent conflicts of changing $headings-color
  color: inherit;
}
// Provide class for links that match alerts
.alert-link {
  font-weight: bold;
}

// Dismissible alerts
.alert-dismissible {
  padding-right: 4rem;

  .close {
    position: absolute;
    top: 0;
    right: 0;
    padding: $alert-padding-y $alert-padding-x;
    color: inherit;
  }
}

@each $color, $value in $theme-colors {
  .alert-#{$color} {
    @include alert-variant(color-level($value, $alert-bg-level), color-level($value, $alert-border-level), color-level($value, $alert-color-level));
  }
}