Cacher is the code snippet organizer for pro developers

<div class="block">
  Teste
</div>

<div class="block_alert">
  teste 2
</div>

<div class="block_alert__dashed">
  Teste
</div>

<div class="block_danger__dashed">
  Teste
</div>

<div class="block_success__dashed">
  Teste
</div>

.block, .block_success, .block_success__dashed, .block_alert, .block_alert__dashed, .block_danger, .block_danger__dashed {
  width: 500px;
  position: relative;
  margin-top: 15px;
  padding-top: 15px;
  padding-bottom: 15px;
  padding-left: 15px;
  padding-right: 15px;
  border-radius: 5px;
  border-size: 1px;
  border-style: solid;
}
.block:after, .block_success:after, .block_success__dashed:after, .block_alert:after, .block_alert__dashed:after, .block_danger:after, .block_danger__dashed:after {
  display: block;
  content: "x";
  position: absolute;
  top: 10px;
  right: 10px;
  border-radius: 50%;
  background: #CCC;
  color: #FFF;
  width: 10px;
  height: 10px;
  padding: 3px;
  font-family: sans-serif;
  font-size: 12px;
  font-weight: bold;
}
.block_success, .block_success__dashed {
  background: #f8fff8;
  border-color: #99DD99;
}
.block_alert, .block_alert__dashed {
  background: #fffff8;
  border-color: #EEEE99;
}
.block_danger, .block_danger__dashed {
  background: #fff8f8;
  border-color: #DD9999;
}

.block_success__dashed, .block_alert__dashed, .block_danger__dashed {
  border-style: dashed;
}

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

$color-alert: #EEEE99;
$color-danger: #DD9999;
$color-success: #99DD99;

.block {
  width: 500px;
  position: relative;

  margin: {
    top: 15px;
  }

  padding: {
    top: 15px;
    bottom: 15px;
    left: 15px;
    right: 15px;
  }

  border: {
    radius: 5px;
    size: 1px;
    style: solid;
  }
  
  &:after {
    display: block;
    content: "x";
    position: absolute;
    top: 10px;
    right: 10px;
    border-radius: 50%;
    background: #CCC;
    color: #FFF;
    width: 10px;
    height: 10px;
    padding: 3px;
    
    font: {
      family: sans-serif;
      size: 12px;
      weight: bold;
    }
  }
  
  @each $type, $color in (success, $color-success), (alert, $color-alert), (danger, $color-danger) {
    &_#{$type} {
      @extend .block;
      background: $color + #5F5F5F;
      border-color: $color;
      
      &__dashed { @extend .block, .block_#{$type}; @extend %dashed; }
    }
  }
}

%dashed { border-style: dashed; }

<div class="block">
  Teste
</div>

<div class="block_alert">
  teste 2
</div>

<div class="block_alert__dashed">
  Teste
</div>

<div class="block_danger__dashed">
  Teste
</div>

<div class="block_success__dashed">
  Teste
</div>