Hint-boxes with Sass-lists - comaptible with Sass 3.2

SassMeister-input-HTML.html

<p class="message-info">You might want to know this.</p>
<p class="message-error">There might be something wrong.</p>
<p class="message-warn">You should pay attention!</p>
<p class="message-valid">Everything is okay, move on.</p>

SassMeister-input.scss

// ----
// Sass (v3.2.14)
// Compass (v0.12.2)
// ----

// See: http://codepen.io/HugoGiraudel/pen/Dzloe

// Switched to Sass-list instead of Sass-maps
// Configuration variables
// Type name | color scheme
$message-types: 
  error #b94a48,
  warn  #c09853,
  valid #468847,
  info  #3a87ad;

// Mixin for dynamic values
// Extending the placeholder
@mixin message($color) {
  @extend %message;
  color: $color;
  background: lighten($color, 38%);
  border-color: lighten($color, 20%);
}
 
// Loop doing all the dumping
@each $type in $message-types {
  .message-#{nth($type,1)} {
    @include message(nth($type,2));
  }
}

// Placeholder can be placed on the end of everything
// Placeholder for static values
%message {
	  padding: .5em;
	  margin: .5em;
	  border-radius: .15em;
	  border: 1px solid;
}

SassMeister-output.css

.message-error {
  color: #b94a48;
  background: #efd5d4;
  border-color: #d59392;
}

.message-warn {
  color: #c09853;
  background: #f4ede1;
  border-color: #dbc59e;
}

.message-valid {
  color: #468847;
  background: #b6dab7;
  border-color: #7aba7b;
}

.message-info {
  color: #3a87ad;
  background: #bfdcea;
  border-color: #7ab5d3;
}

.message-error, .message-warn, .message-valid, .message-info {
  padding: .5em;
  margin: .5em;
  border-radius: .15em;
  border: 1px solid;
}

SassMeister-rendered.html

<p class="message-info">You might want to know this.</p>
<p class="message-error">There might be something wrong.</p>
<p class="message-warn">You should pay attention!</p>
<p class="message-valid">Everything is okay, move on.</p>