Generated by SassMeister.com.

browserslist

> 1%
last 2 versions

SassMeister-input-HTML.html

<div class="message">
  Here is an important message!
</div>

<div class="message-error">
  Here is an important message!
</div>

SassMeister-input.scss

// ----
// Sass (v3.4.25)
// Compass (v1.0.3)
// ----

.message {
  padding: .5em;
  margin: 1em 0;
  background: lightgrey;
  border: solid 1px darkgrey;
  color: black;
}

.message-error {
  @extend .message;
  border-color: red;
  border-width: 3px;
}

SassMeister-output.css

.message, .message-error {
  padding: .5em;
  margin: 1em 0;
  background: lightgrey;
  border: solid 1px darkgrey;
  color: black;
}

.message-error {
  border-color: red;
  border-width: 3px;
}

SassMeister-rendered.html

<div class="message">
  Here is an important message!
</div>

<div class="message-error">
  Here is an important message!
</div>