Skip to content

Instantly share code, notes, and snippets.

@stacyk
Created November 11, 2022 17:24
Show Gist options
  • Save stacyk/6be0988eb0b6dcd5874274af04e5ef77 to your computer and use it in GitHub Desktop.
Save stacyk/6be0988eb0b6dcd5874274af04e5ef77 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
@use "sass:color";
.foo {
--b: #{color.blackness(color.hwb(0 0% 50%))};
}
.bar {
--b: #{color.blackness(color.hwb(0 50% 50%))};
}
.baz {
--b: #{color.blackness(color.hwb(0 70% 70%))};
}
main {
display: grid;
height: 100vh;
grid-template-columns: 1fr 1fr 1fr;
}
div {
background: color.hwb(0 0% var(--b));
}
<main>
<div class="foo"></div>
<div class="bar"></div>
<div class="baz"></div>
</main>
.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));
}
{
"sass": {
"compiler": "dart-sass/1.32.12",
"extensions": {},
"syntax": "SCSS",
"outputStyle": "expanded"
},
"autoprefixer": false
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment