Generated by SassMeister.com.

input.scss

body {
    --width-large: 100;
    --width-small: 25;
    --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);

    border: solid olive var(--colpx);
    display: grid;
    font-size: var(--colrem);
    grid-template-columns: 1fr var(--colfr);
}

markup.html

<div>First Column</div>
<div>Second Column</div>

output.css

body {
  --width-large: 100;
  --width-small: 25;
  --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);
  border: solid olive var(--colpx);
  display: grid;
  font-size: var(--colrem);
  grid-template-columns: 1fr var(--colfr);
}

settings.json

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