> For the complete documentation index, see [llms.txt](https://docs.ushahidi.com/platform-developer-documentation/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.ushahidi.com/platform-developer-documentation/dev-legacy-v3/front-end-development/changing-ui-styles-introduction-to-the-pattern-library/variables.md).

# Variables

Variables are defined in [\_settings.scss](https://github.com/ushahidi/platform-pattern-library/blob/gh-pages/assets/sass/_settings.scss). A few common variables are breakpoints, color, z-index and spacing, but other variables are available.

## Example use

When using a color more than once, store it in a variable with a meaningful name representing the color.

```
// The variable is set within the .setting.scss file then used 
//across the .scss files.
// This allows you to update the whole code base just by editing 
//one instance, in this example $blue.

$blue: #2274b4;

.class {
    color: $blue;
}

.class-2 {
    border-color: $blue;
}

.class- {
    background-color: $blue;
}
```