.close-button {
  position: absolute;
  color: #999;
  top: 1rem;
  right: 1rem;
  font-size: 2em;

  &:hover {
    color: #333;
  }
}

%thumbnail {
  padding: 0.5rem;
  box-shadow: 0 3px 15px rgba(black, 0.25);
}

img {
  max-width: 100%;

  &.thumbnail {
    @extend %thumbnail;
  }
}
ul.thumbnails > li > img {
  @extend %thumbnail;
}
/*
  Odds and ends.
*/

// A basic close button. They pin to the top-right of the thing they're inside.
%close-button {
  position: absolute;
  color: #999;
  top: 1rem;
  right: 1rem;
  font-size: 2em;

  &:hover {
    color: #333;
  }
}

// Make your images fancy-like.
%thumbnail {
  padding: 0.5rem;
  box-shadow: 0 3px 15px rgba(black, 0.25);
}

/*
  CSS Output
*/

.close-button {
  @extend %close-button;
}
.thumbnail {
@extend %thumbnail;
}
ul.thumbnails > li > img {
  @extend %thumbnail;
}

Tweak inline elements Sass slightly
Tweak inline elements Sass slightly
