scss-dynamic-class-colour-map-generation.scss

//# Demo: https://codepen.io/anon/pen/MJdXQr


//Assumes something like this:
$uikit-colour-Error:	#cc0000 !global;
$uikit-colour-Success:	#007554 !global;
$uikit-colour-Warning:	#f9c642 !global;
$uikit-colour-Info:	#00bfe9 !global;


//Map we need for class name generation and var interpolation.
$uikit-colour-vars:
	'Info' 		$uikit-colour-Info,
	'Warning' 	$uikit-colour-Warning,
	'Success' 	$uikit-colour-Success,
	'Error' 	$uikit-colour-Error,
;


//The tint amounts we desire for each tint.
$colour-tints:
	90
	80
	70
	60
	50
	40
	30
	20
	10
	5
;


//Loop through our colour alias: colour var list...
@each $colour-var in $uikit-colour-vars {
	//Gives a class name that ends with the colour alias for reach colour.
	.uikit-colour-#{ nth($colour-var, 1) } {
		//Sets the actual colour hex output (interpolated).
		color: #{ nth($colour-var, 2) };

		//Now for each tint...
		@each $tint in $colour-tints {
			//Give me the parent class, and append the tint to it (interpolated).
			&-#{ $tint } {
				//Now autogenerate the correct tint from the 10 for each of the
				//respective colours:
				color: mix(white, nth($colour-var, 2), (100 - $tint));

				//Testing remains
				&:after {
					//content: ".uikit-colour-#{nth($colour-var, 1)}-#{$tint}";
				}
			}
		}
	}
}