Cacher is the code snippet organizer for pro developers

<!-- old style -->
<!--<div class="message">This is a regular alert message.</div>-->
<!--<div class="info">This is an informational message.</div>-->
<!--<div class="error">This is an error message.</div>-->
<!--<div class="success">This is a success message.</div>-->

<!-- extended classname style -->
<div class="message">This is a regular alert message.</div>
<div class="message-info">This is a regular alert message.</div>
<div class="message-error">This is a regular alert message.</div>
<div class="message-success">This is a regular alert message.</div>

body {
  font-family: "Proxima Nova";
}

.message,
.message-info,
.message-error,
.message-success {
  padding: 1em;
  background: #eeeeee;
  border: 4px solid #d4d4d4;
  width: 60%;
  margin: 0 auto 1em;
}

.message-info {
  background: #237cbe;
  border-color: #1b6093;
}

.message-error {
  background: #f93831;
  border-color: #f00f07;
}

.message-success {
  background: #9bc33f;
  border-color: #7d9e31;
}

// ----
// Sass (v3.3.14)
// Compass (v1.0.1)
// ----

body {font-family: "Proxima Nova";}

// OLD STYLE
// .message,
// .info,
// .error, 
// .success {
//   padding: 1em;
//   width: 60%;
//   margin: 0 auto 1em;
// }
// .message {background: #eee; border: 4px solid #ddd;}
// .info {background: #237CBE; border: 4px solid #1B6093;}
// .error {background: #F93831; border: 4px solid #F00F07;}
// .success {background: #9BC33F; border: 4px solid #7D9E31;}


// NEW STYLE w SASS EXTEND

$green: #9BC33F;
$blue: #237CBE;
$red: #F93831;
$grey: #eee;

.message,
%message {
  padding: 1em;
  background: $grey;
  border: 4px solid darken($grey,10%);
  width: 60%;
  margin: 0 auto 1em;
}


.message-info {
  @extend %message;
  background: $blue;
  border-color: darken($blue,10%);
}

.message-error {
  @extend %message;
  background: $red;
  border-color: darken($red,10%);
}

.message-success {
  @extend %message;
  background: $green;
  border-color: darken($green,10%);
}

<!-- old style -->
<!--<div class="message">This is a regular alert message.</div>-->
<!--<div class="info">This is an informational message.</div>-->
<!--<div class="error">This is an error message.</div>-->
<!--<div class="success">This is a success message.</div>-->

<!-- extended classname style -->
<div class="message">This is a regular alert message.</div>
<div class="message-info">This is a regular alert message.</div>
<div class="message-error">This is a regular alert message.</div>
<div class="message-success">This is a regular alert message.</div>