SCSS mixins for generating a set of CSS Custom Properties to use for HSL color calculations.

generateHSLCustomProperties.scss

// Generates a set of flexible CSS Custom Properties 
@mixin generateHSLCustomProperties($propertyName, $hue, $saturation, $lightness) {
	// $safeName is necessary because $name can be a color literal (like 'red').
	// Sass doesn't like that, so we convert it to a string.
	$safeName: '' + $propertyName;

	--#{$safeName}-hue: calc(#{$hue} + var(--hue-shift));
	--#{$safeName}-saturation: #{$saturation};
	--#{$safeName}-lightness: #{$lightness};

	--#{$safeName}-hsl: 
		var(--#{$safeName}-hue), 
		var(--#{$safeName}-saturation), 
		var(--#{$safeName}-lightness);

	--#{$safeName}: hsl(var(--#{$safeName}-hsl));
}





// Wrapper for generateHSLCustomProperties that pregenerates the hue,
// saturation, and lightness values
@mixin generateHSLCustomPropertiesFromColor($propertyName, $color) {
	@include generateHSLCustomProperties(
		$propertyName,
		hue($color),
		saturation($color),
		lightness($color)
	)
}





// Example input
:root {
	--hue-shift: 0deg;
	@include generateHSLCustomPropertiesFromColor('brand-color', red);
}

// Example output
:root {
	--hue-shift: 0deg;
	--brand-color-hue: calc(0deg + var(--hue-shift));
	--brand-color-saturation: 100%;
	--brand-color-lightness: 50%;
	--brand-color-hsl:
		 var(--brand-color-hue),
		 var(--brand-color-saturation),
		 var(--brand-color-lightness);
	--brand-color: hsl(var(--brand-color-hsl));
}