Mixins in Sass

SassMeister-input-HTML.html

<h1>Mixins</h1>
<p>Mixins are very useful when you have many elements that have the same basic styles, but with a few differences.</p>
<p>Some examples are buttons. Maybe sometimes a button is blue, other times there are green buttons, and other times the button is transparent.</p>
<p>A mixin is a kind of function that will let you feed it parameters to make these minor changes to common styles.</p>
<p>The @mixin directive let's you declare (define) a mixin.</p>
<p>The @include directive let's you use a mixin.</p>

<p class="button">Read More</p>
<a class="button-red">Important!</a>

SassMeister-input.scss

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

$off-black: #4d4d4d;

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

.button {
  @include button;
}

.button-red {
  @include button(red);
  &:hover {
    //background-color: pink;
    //color: maroon;
  }
}

SassMeister-output.css

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

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

SassMeister-rendered.html

<h1>Mixins</h1>
<p>Mixins are very useful when you have many elements that have the same basic styles, but with a few differences.</p>
<p>Some examples are buttons. Maybe sometimes a button is blue, other times there are green buttons, and other times the button is transparent.</p>
<p>A mixin is a kind of function that will let you feed it parameters to make these minor changes to common styles.</p>
<p>The @mixin directive let's you declare (define) a mixin.</p>
<p>The @include directive let's you use a mixin.</p>

<p class="button">Read More</p>
<a class="button-red">Important!</a>