Sass Maps of the Google Material UI Color Palette

Here are Sass maps of the Color Palette found in the Google Material UI.

Usage

Use map-get($color, $value) (reference) using the color names and values from the Material UI specification. Spaces in color names are replaced with a single dash (-).

Bundled is a custom function to improve the semantics of the color palette:

@function color($color, $value: 500) {
  @return map-get($color, $value);
}

Which can be used like this:

.element {
  background: color($indigo, 400);
}

Do note that if no $value is set, it defaults to the primary color value of 500.

Requirements

Sass 3.3 (Maptastic Maple)