Generated by SassMeister.com.

browserslist

> 1%
last 2 versions

SassMeister-input-HTML.html

<button class="btn">.btn</button>
<button class="btn-warning">.btn-warning</button>

<button class="btn2">.btn2</button>
<button class="btn2-warning">.btn2-warning</button>

SassMeister-input.scss

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

$btn-warning-bgcol: #a20000;
$btn-warning-col: #fff;

    %btn { 
      color: #000;
      background-color: #cecece;
      border: none;
      border-radius: 10px;
    }

    @mixin btn { 
      color: #000;
      background-color: #cecece;
      border: none;
      border-radius: 10px;
    }

    .btn {
        @include btn;
    }
    .btn-warning {
        @include btn;
        color: $btn-warning-col;
        background-color: $btn-warning-bgcol;
    }

// =========== refers to the placeholder =========
  .btn2 {
    @extend %btn;
  }  
  .btn2-warning {
      @extend %btn;
      color: $btn-warning-col;
      background-color: $btn-warning-bgcol;
  }
  

body {padding: 40px;}
button {font-size: 2rem; padding: 10px; margin-right: 20px;}

SassMeister-output.css

.btn2, .btn2-warning {
  color: #000;
  background-color: #cecece;
  border: none;
  border-radius: 10px;
}

.btn {
  color: #000;
  background-color: #cecece;
  border: none;
  border-radius: 10px;
}

.btn-warning {
  color: #000;
  background-color: #cecece;
  border: none;
  border-radius: 10px;
  color: #fff;
  background-color: #a20000;
}

.btn2-warning {
  color: #fff;
  background-color: #a20000;
}

body {
  padding: 40px;
}

button {
  font-size: 2rem;
  padding: 10px;
  margin-right: 20px;
}

SassMeister-rendered.html

<button class="btn">.btn</button>
<button class="btn-warning">.btn-warning</button>

<button class="btn2">.btn2</button>
<button class="btn2-warning">.btn2-warning</button>