Generated by SassMeister.com.
<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>