Last active
March 26, 2018 21:01
-
-
Save chriskirknielsen/d349d1b4ba0a0b95c4fac091044fe4e1 to your computer and use it in GitHub Desktop.
SCSS function to return a colour from a list, in hexidecimal or rgba value
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
$colors: ( // Define a list of colours to use | |
'main': #00a39b, | |
'secondary': #cf0079, | |
'light': #e6e6e6, | |
'gray': #686868, | |
'dark': #161616 | |
); | |
/** SCSS function to return a colour from a list, in hexidecimal or rgba value | |
* @param name: key used in the $colors list associated with a hexadecimal colour | |
* @param opacity: opacity value [0, 100] to be used by the rgba() colour; hex (default) to get the solid colour in hexadecimal value | |
**/ | |
@function colomapa($name, $opacity: hex) { | |
@if map-has-key($colors, $name) { // If the colour exists in the list… | |
@if $opacity != hex { // …return RGBA value | |
$opacity-decimal: $opacity/100; | |
@return rgba(map-get($colors, $name), $opacity-decimal); | |
} | |
@else { // …returns hexidecimal value | |
@return map-get($colors, $name); | |
} | |
} | |
@else { // Return a CSS colour keyword in case it exists | |
@return unquote($name); | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment