Generated by SassMeister.com.

input.scss

@use "sass:color";

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

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

.baz {
  background-color: 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 {
  background-color: 49.8039215686%;
}

.bar {
  background-color: 49.8039215686%;
}

.baz {
  background-color: 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
}