Extending a placeholder class in Sass

SassMeister-input-HTML.html

<p>A "placeholder" class does not print out the class itself. It is useful when you have CSS properties that don't apply to any specific element in the HTML, but will be used in many places on elements with different selectors.</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

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

SassMeister-rendered.html

<p>A "placeholder" class does not print out the class itself. It is useful when you have CSS properties that don't apply to any specific element in the HTML, but will be used in many places on elements with different selectors.</p>

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

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