Set of mixins for theming and workflow with power of scss and css properties.
$brand: rgb(37, 100, 131);
:root {
@include color\define((
--brand: $brand
));
}compile to
:root {
--brand: hsl(var(--brand-h), var(--brand-s), var(--brand-l));
--brand-h: 200deg;
--brand-s: 56%;
--brand-l: 33%;
}You can use nested define variables
$brand: hsl(200, 56%, 33%);
$brand-green: green;
:root {
@include color\define((
--brand: (
color: $brand,
--green: $brand-green
),
));
}compile to
:root {
--brand: hsl(var(--brand-h), var(--brand-s), var(--brand-l));
--brand-h: 200deg;
--brand-s: 56%;
--brand-l: 33%;
--brand--green: hsl(var(--brand--green-h), var(--brand--green-s), var(--brand--green-l));
--brand--green-h: 120deg;
--brand--green-s: 100%;
--brand--green-l: 25.09804%;
}You can use some function
$brand: hsl(200, 56%, 33%);
:root {
@include color\define((
--brand: $brand,
));
--brand-dark: #{color\adjust(--brand, $brand, $saturation: -20)};
--brand-funny: #{color\adjust(--brand, $brand, $hue: 50, $saturation: 16, $lightness: 4, $alpha: -10%)};
--brand-new: #{color\change(--brand, $brand, $hue: 50)};
--brand-new-08: #{color\change(--brand, $brand, $hue: 50, $alpha: 0.8)};
}compile to
:root {
// color\define
--brand: hsl(var(--brand-h), var(--brand-s), var(--brand-l));
--brand-h: 200deg;
--brand-s: 56%;
--brand-l: 33%;
// color\adust
--brand-dark: hsl(var(--brand-h), calc(var(--brand-s) + -20%), var(--brand-l));
--brand-funny: hsla(calc(var(--brand-h) + 50deg), calc(var(--brand-s) + 16%), calc(var(--brand-l) + 4%), calc(var(--brand-a) * 0.9));
// color\change
--brand-new: hsl(50deg, var(--brand-s), var(--brand-l));
--brand-new-08: hsla(50deg, var(--brand-s), var(--brand-l), 0.8);
}And mix its
$brand: hsl(200, 56%, 33%);
:root {
@include color\define((
--brand: (
color: $brand,
--dark: #{color\adjust(--brand, $brand, $saturation: -20)}
),
));
}compile to
:root {
--brand: hsl(var(--brand-h), var(--brand-s), var(--brand-l));
--brand-h: 200deg;
--brand-s: 56%;
--brand-l: 33%;
--brand--dark: hsl(var(--brand-h), calc(var(--brand-s) + -20%), var(--brand-l));
}