<div class="alert-error">
  Oh no! That went pear-shaped.
</div>

<div class="alert-success">
  Congratulations! You did something.
</div>

<div class="alert-attention">
  Hang on, you might want to check this.
</div>

<div class="alert-info">
  I had toast for breakfast.
</div>
// base styles
div {
  padding: 25px;
  border: 1px solid gray;
  border-radius: 3px;
  margin: 25px;
}

// variables
@colors : #ED5565, #A0D468, #F6BB42, #5D9CEC;
@names  : error, success, attention, info;
@length : length(@colors);


.alert-variation(@names; @colors; @index) when (iscolor(extract(@colors, @index))) and (@index > 0) {
	.alert-variation(@names; @colors; (@index - 1)); // decrement.

  @name  : extract(@names, @index);
  @color : extract(@colors, @index);

  .alert-@{name} {
    border-color: darken(@color, 10%);
    color: darken(@color, 30%);
    background-color: @color;
  }

}

.alert-variation(@names; @colors; @length);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.