The @extend directive in Sass

SassMeister-input-HTML.html

<p class="button">Button</p>

<p>Somtimes you don't have control over the CSS class. In that case, you can "extend" a previously made class.</p>

<p class="something-else">Read More</p>

<p>Try overriding a propery in the .something-else class after the @extend directive.</p>

SassMeister-input.scss

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

$off-black: #4d4d4d;

.button {
  padding: 5px 10px;
  border: 1px solid $off-black;
  background-color: white;
  appearance: none;
  display: inline-block;
  transition: background-color 0.25s ease;
  &:hover {
    cursor: pointer;
    background-color: #ccc;
  }
}

.something-else {
  @extend .button;
}

SassMeister-output.css

.button, .something-else {
  padding: 5px 10px;
  border: 1px solid #4d4d4d;
  background-color: white;
  appearance: none;
  display: inline-block;
  transition: background-color 0.25s ease;
}
.button:hover, .something-else:hover {
  cursor: pointer;
  background-color: #ccc;
}

SassMeister-rendered.html

<p class="button">Button</p>

<p>Somtimes you don't have control over the CSS class. In that case, you can "extend" a previously made class.</p>

<p class="something-else">Read More</p>

<p>Try overriding a propery in the .something-else class after the @extend directive.</p>