Alert component with Sass and CSS4 Custom Properties

browserslist

> 1%
last 2 versions

SassMeister-input-HTML.html

<div class="Alert Alert--danger" role="alert">
  <strong>Oh snap!</strong> Change a few things up and try submitting again.
</div>
<div class="Alert Alert--success" role="alert">
  <strong>Well done!</strong> You successfully read this important alert message.
</div>
<div class="Alert Alert--warning" role="alert">
  <strong>Warning!</strong> Better check yourself, you're not looking too good.
</div>
<div class="Alert Alert--info" role="alert">
  <strong>Heads up!</strong> This alert needs your attention, but it's not super important.
</div>

SassMeister-input.scss

// ----
// Sass (v3.4.21)
// Compass (v1.0.3)
// ----

:root {
  --spacer: 1rem;
  --spacer-lg: 2rem;
  --global-border-radius: 3px;
  --color-danger: #e14b3c;
  --color-danger-lighter: #{lighten(#e14b3c, 35%)};
  --color-info: #38b1e8;
  --color-info-lighter: #{lighten(#38b1e8, 35%)};
  --color-warning: #dcaa44;
  --color-warning-lighter: #{lighten(#dcaa44, 35%)};
  --color-success: #6abb4f;
  --color-success-lighter: #{lighten(#6abb4f, 35%)};
  --alert-padding: var(--spacer-lg);
  --alert-margin-bottom: var(--spacer);
  --alert-border-width: 1px;
  --alert-border-radius: --global-border-radius;
}

.Alert {
  font-family: 'Open Sans', sans-serif;
  padding: var(--alert-padding);
  margin-bottom: var(--alert-margin-bottom);
  border: var(--alert-border-width) solid transparent;
  border-radius: var(--alert-border-radius);
}

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

$variants: danger,
warning,
info,
success;
@each $variant in $variants {
  .Alert--#{$variant} {
    @include alert-variant(var(--color-#{$variant}), var(--color-#{$variant}-lighter));
  }
}

SassMeister-output.css

:root {
  --spacer: 1rem;
  --spacer-lg: 2rem;
  --global-border-radius: 3px;
  --color-danger: #e14b3c;
  --color-danger-lighter: #f9dad7;
  --color-info: #38b1e8;
  --color-info-lighter: #d8f0fa;
  --color-warning: #dcaa44;
  --color-warning-lighter: #f8eeda;
  --color-success: #6abb4f;
  --color-success-lighter: #d7edd0;
  --alert-padding: var(--spacer-lg);
  --alert-margin-bottom: var(--spacer);
  --alert-border-width: 1px;
  --alert-border-radius: --global-border-radius;
}

.Alert {
  font-family: 'Open Sans', sans-serif;
  padding: var(--alert-padding);
  margin-bottom: var(--alert-margin-bottom);
  border: var(--alert-border-width) solid transparent;
  border-radius: var(--alert-border-radius);
}

.Alert--danger {
  color: var(--color-danger);
  background: var(--color-danger-lighter);
}

.Alert--warning {
  color: var(--color-warning);
  background: var(--color-warning-lighter);
}

.Alert--info {
  color: var(--color-info);
  background: var(--color-info-lighter);
}

.Alert--success {
  color: var(--color-success);
  background: var(--color-success-lighter);
}

SassMeister-rendered.html

<div class="Alert Alert--danger" role="alert">
  <strong>Oh snap!</strong> Change a few things up and try submitting again.
</div>
<div class="Alert Alert--success" role="alert">
  <strong>Well done!</strong> You successfully read this important alert message.
</div>
<div class="Alert Alert--warning" role="alert">
  <strong>Warning!</strong> Better check yourself, you're not looking too good.
</div>
<div class="Alert Alert--info" role="alert">
  <strong>Heads up!</strong> This alert needs your attention, but it's not super important.
</div>