JSFiddle - React, Tailwind, and code Playground

HTML

<div class="box">
  <div class="small-box"></div>
</div>

SCSS

:root {
  --box-size: 10rem;
  --small-size: calc(var(--box-size) / 2);
}

$tablet: "(min-width: 768px)";

.box {
  width: var(--box-size);
  height: var(--box-size);
  background: red;
  
  @media #{$tablet} {
    --box-size: 20rem;
    /* --small-size: calc(var(--box-size) / 2); */ /* Works after redeclaration */
  }
}

.small-box {
  width: var(--small-size);
  height: var(--small-size);
  background: blue;
}