Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="join-now">
  Inverted Block
</div>
<p>Normal Paragraph</p>

SassMeister-input.scss

// ----
// Sass (v3.3.14)
// Compass (v1.0.0)
// ----

$color-primary: #914614;

%inverted-block {
	color: white;
	background-color: $color-primary;
}

.join-now {
  @extend %inverted-block;
}

p {
	color: $color-primary;
}

/**
 * Additional styles to format
 */
 %inverted-block, p {
   font-family: sans-serif;
 }
 
 %inverted-block {
   width: 50%;
   display: inline-block;
   padding: 20px;
 }
 
 p {
   display: inline-block;
   padding: 20px;
 }

SassMeister-output.css

.join-now {
  color: white;
  background-color: #914614;
}

p {
  color: #914614;
}

/**
 * Additional styles to format
 */
.join-now, p {
  font-family: sans-serif;
}

.join-now {
  width: 50%;
  display: inline-block;
  padding: 20px;
}

p {
  display: inline-block;
  padding: 20px;
}

SassMeister-rendered.html

<div class="join-now">
  Inverted Block
</div>
<p>Normal Paragraph</p>