Skip to content

Instantly share code, notes, and snippets.

@MatthewWilkes
Created January 17, 2024 10:22
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save MatthewWilkes/71d7a68f3af96fc1f36287e5e11bf8ff to your computer and use it in GitHub Desktop.
Save MatthewWilkes/71d7a68f3af96fc1f36287e5e11bf8ff to your computer and use it in GitHub Desktop.
Semitransparent equivalents
// Compiled result
:root {
--colour-soft1-0: #eadbea;
--colour-soft1-25: #efe4ef;
--colour-soft1-50: #f5edf5;
--colour-soft1-75: #faf6fa;
--colour-soft2-0: #ead2d5;
--colour-soft2-25: #efdde0;
--colour-soft2-50: #f5e9ea;
--colour-soft2-75: #faf4f5;
}
$opacities: (
0: 0%,
25: 25%,
50: 50%,
75: 75%,
);
$colours: (
soft1: #eadbea,
soft2: #ead2d5
);
:root {
@each $colkey, $colval in $colours {
@each $opakey, $opaval in $opacities {
--colour-#{$colkey}-#{$opakey}: mix(#ffffff, $colval, $opaval);
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment