Last active
February 18, 2017 09:01
-
-
Save klepas/2804a63cbc65c4d85c8181807ce0d08d to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
//# 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}"; | |
} | |
} | |
} | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment