JSFiddle - React, Tailwind, and code Playground

by Daniel Mason

HTML

<div class="base"></div>
<div class="broken-child"></div>
<div class="working-child"></div>

SCSS

.base {
  $myColor: blue;
  width: 100px;
  height: 60px;
  background-color: $myColor;
  margin:5px;
}

.broken-child {
  @extend .base;
  $myColor: red;
}

.working-child {
  @extend .base;
  background-color: red;
}