Generated by SassMeister.com.

input.scss

.cont {
    width: 500px;
    display: grid;
    grid-template-columns: 50px 1fr 2fr; 
}
.foo {
    display: block;
    background: yellow;
    border: red solid 1px;
}

markup.html

<div class="cont">
    <div class="foo">foo</div>
    <div class="foo">foo</div>  
    <div class="foo">foo</div>

</div>

output.css

.cont {
  width: 500px;
  display: grid;
  grid-template-columns: 50px 1fr 2fr;
}

.foo {
  display: block;
  background: yellow;
  border: red solid 1px;
}

settings.json

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