Cacher is the code snippet organizer for pro developers

<div class="demo">
  <span class="badge">Badge</span>
  <span class="badge-alert">badge-alert</span>
  <span class="badge-error">badge-error</span>
  <span class="badge-notice">badge-notice</span>
  <span class="badge-success">badge-success</span>
</div>

// ----
// libsass (v3.5.0.beta.2)
// ----

// default fragments base stylings
$medium-gray: #999 !default;
$alert-color: #fff6bf !default;
$error-color: #fbe3e4 !default;
$notice-color: #e5edf8 !default;
$success-color: #e6efc2 !default;

// Component settings
$badge-class-prefix: 'badge' !default;
$badge-font-size: 0.75em !default;
$badge-default-color: $medium-gray !default;

@mixin badge() {

  border-radius: $badge-font-size * 5;
  display: inline-block;
  font-size: $badge-font-size;
  line-height: 1;
  padding: 0.4em 1.2em;
}

@mixin badge-theme($color: $badge-default-color){
  background-color: $color;
  color: darken($color, 60%);
}


[class*="#{$badge-class-prefix}"]{
  @include badge;
}

.#{$badge-class-prefix} {
  @include badge-theme();
}

.#{$badge-class-prefix}-alert {
  @include badge-theme($alert-color);
}

.#{$badge-class-prefix}-error {
  @include badge-theme($error-color);
}

.#{$badge-class-prefix}-notice {
  @include badge-theme($notice-color);
}

.#{$badge-class-prefix}-success {
  @include badge-theme($success-color);
}



// Demo
div.demo {
  width: 700px;
  margin:0 auto;
  padding-top: 2rem;
  text-align: center;
}

> 1%
last 2 versions

[class*="badge"] { border-radius: 3.75em; display: inline-block; font-size: 0.75em; line-height: 1; padding: 0.4em 1.2em; }

.badge { background-color: #999; color: black; }

.badge-alert { background-color: #fff6bf; color: #8c7800; }

.badge-error { background-color: #fbe3e4; color: #97161b; }

.badge-notice { background-color: #e5edf8; color: #244e87; }

.badge-success { background-color: #e6efc2; color: #56651a; }

div.demo { width: 700px; margin: 0 auto; padding-top: 2rem; text-align: center; }

<div class="demo">
  <span class="badge">Badge</span>
  <span class="badge-alert">badge-alert</span>
  <span class="badge-error">badge-error</span>
  <span class="badge-notice">badge-notice</span>
  <span class="badge-success">badge-success</span>
</div>