Generated by SassMeister.com.

input.scss

@use "sass:color";

.foo {
  --b: #{color.blackness(color.hwb(0 0% 50%))};
  --w: 0%;
}

.bar {
  --b: #{color.blackness(color.hwb(0 50% 50%))};
  --w: 50%;
}

.baz {
  --b: #{color.blackness(color.hwb(0 70% 70%))}; 
  --w: 70%;
}

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

div {
    background: color.hwb(0 #{var(--w)} #{var(--b)});
}

markup.html

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

output.css

.foo {
  --b: 49.8039215686%;
}

.bar {
  --b: 49.8039215686%;
}

.baz {
  --b: 49.8039215686%;
}

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

div {
  background-color: hwb(0, 0%, var(--b));
}

settings.json

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