Generated by SassMeister.com.

input.scss

body {
    --width-large: 100;
    --width-small: 5;
    --colpx: calc(var(--width-large) / var(--width-small) * 1px);  // 20px
    --colrem: calc(var(--width-large) / var(--width-small) * 1rem); // 20rem
    --colfr: calc(var(--width-large) / var(--width-small) * 1fr); // 20fr
}

.grid {
    border: solid purple; 
    display: grid;
    max-width: 40rem;
}

.px {
    border-width: var(--colpx);
    font-size: var(--colpx); 
    grid-template-columns: 1fr var(--colpx);
}

.fr {
    border-width: var(--colfr);
    font-size: var(--colfr);  
    grid-template-columns: 1fr var(--colfr);
}

.rem {
    border-width: var(--colrem);
    font-size: var(--colrem);  
    grid-template-columns: 1fr var(--colrem);
}


div:first-child {
    background: hsl(200deg 50% 70%);
}

div:nth-child(2) {
    background: hsl(100deg 50% 70%);
}

body {
    font-size: 16px;
    display: grid;
    gap: 1rem;
}

markup.html

<h2>px</h2>
<div class="grid px">
<div>1</div>
<div>2</div>
</div>

<h2>fr</h2>
<div class="grid fr">
<div>1</div>
<div>2</div>
</div>

<h2>rem</h2>
<div class="grid rem">
<div>1</div>
<div>2</div></div>

output.css

body {
  --width-large: 100;
  --width-small: 5;
  --colpx: calc(var(--width-large) / var(--width-small) * 1px);
  --colrem: calc(var(--width-large) / var(--width-small) * 1rem);
  --colfr: calc(var(--width-large) / var(--width-small) * 1fr);
}

.grid {
  border: solid purple;
  display: grid;
  max-width: 40rem;
}

.px {
  border-width: var(--colpx);
  font-size: var(--colpx);
  grid-template-columns: 1fr var(--colpx);
}

.fr {
  border-width: var(--colfr);
  font-size: var(--colfr);
  grid-template-columns: 1fr var(--colfr);
}

.rem {
  border-width: var(--colrem);
  font-size: var(--colrem);
  grid-template-columns: 1fr var(--colrem);
}

div:first-child {
  background: #8cbfd9;
}

div:nth-child(2) {
  background: #a6d98c;
}

body {
  font-size: 16px;
  display: grid;
  gap: 1rem;
}

settings.json

{
  "sass": {
    "compiler": "dart-sass/1.32.12",
    "extensions": {},
    "syntax": "SCSS",
    "outputStyle": "expanded"
  },
  "autoprefixer": false
}