Ushahidi Platform Pattern Library
Variables
A wide variety of variables are defined in _settings.scss
.
Color Variables
When using a color more than once, store it in a variable with a meaningful name representing the color.
$blue: #2274b4;
Then use that variable wherever you would like.
$link-color: $blue;
Lightening and Darkening Colors
This is an example of lighten/darken color functions and color variables.
$link-color: $blue;
$link-hover-color: darken( $link-color, 20% );
$link-color-lt: lighten( $link-color, 25% );
$link-color-dark-bg: $link-color-lt;
$link-color-dark-bg-hover: lighten( $link-color-lt, 10% );
Writing variables this way allows us to update the whole code base just by editing one instance ex. $blue
.