Generated by SassMeister.com.

input.scss

@use "sass:color";

.foo {
  b: color.blackness(color.hwb(0, 0%, 50%));
}

.bar {
  c: color.blackness(color.hwb(0, 50%, 50%));
}

.baz {
  d: color.blackness(color.hwb(0, 70%, 70%)); 
}


main {
    display: grid;
    height: 100vh;
    grid-template-columns: 1fr 1fr 1fr;
}

markup.html

<!--<main>-->
<!--  <div class="foo"></div>-->
<!--  <div class="bar"></div>-->
<!--  <div class="baz"></div>-->
<!--</main>-->

output.css

.foo {
  b: 49.8039215686%;
}

.bar {
  c: 49.8039215686%;
}

.baz {
  d: 49.8039215686%;
}

main {
  display: grid;
  height: 100vh;
  grid-template-columns: 1fr 1fr 1fr;
}

settings.json

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