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.