Sass Material Colors Gem Version

This gem makes it easy to use Google's Material Design color palette on your project.

Installation

Add this line to your application's Gemfile:

$ gem 'sass-material-colors'

And then execute:

$ bundle

Or install it yourself as:

$ gem install sass-material-colors

Usage

Import the colors map + function to your project:

// Sass
@import 'sass-material-colors'

This will automatically import a $material-colors Sass map containing all the color names and values found in Google's palette, and the handy material-color function, which allows you to easily reference any color in the $material-colors map from your Sass or Scss stylesheets.

Optionally, you can import a list of predefined placeholder selectors and/or classes to your stylesheets.

The material-color Function

The material-color function allows you to easily reference any color in the _sass-material-colors-map.scss file in your styles:

// Sass
.my-cool-element
  color: material-color(cyan, 400)
  background: material-color(blue-grey, 600)

The material-color function takes 2 arguments:

  • $color-name (Required): Lower-case, dasherized color name from Google's palette (e.g. pink, amber, blue-grey, deep-orange, etc.)
  • $color-variant (optional) [Default value: 500]: Lower-case color variant number/code from Google's palette (e.g. 300, 200, a100, a400, etc.)

Predefined Sass Placeholder Selectors

You can include a list of extendable Sass placeholder selectors in your project by importing the sass-material-colors-placeholders file into your Sass/Scss:

// Sass
@import `sass-material-colors-placeholders`

This will add a %color-... and %bg-color-... placeholder selector for each color name and variant found in Google's palette to your project, which you can then extend in your stylesheets like so:

// Sass
.my-cool-element
  @extend %color-cyan-400
  @extend %bg-color-blue-grey-600

Predefined Classes

You can include a list of predefined classes in your project by importing the sass-material-colors-classes file into your Sass/Scss:

// Sass
@import `sass-material-colors-classes`

This will add a .color-... and .bg-color-... class for each color name and variant found in Google's palette to your stylesheets, which you can then use directly in your markup like so:

<!-- HTML -->
<div class='my-cool-element color-cyan-400 bg-color-blue-grey-600'></div>

TO-DO

  • [ ] Add tests
  • [ ] Make it bower friendly

Contributing

See CONTRIBUTING.

License

See LICENSE.

Special Thanks

To nilskaspersson/Google-Material-UI-Color-Palette for the inspiration on using a Sass map for the colors, and a map function to retrieve them.

To twbs/bootstrap-sass as a reference for this gem.

And to Google for their Material Design spec.